CoreKit

A minimal, reusable React component library built as an internal design system with primitive, composable components.

Private package — not an app. Built in library mode with ESM output.

Tech Stack

| Layer | Technology | | ---------------- | ----------------------------------- | | UI Framework | React 18 | | Language | TypeScript (strict mode) | | Styling | TailwindCSS + CSS Variables | | Variants | class-variance-authority (cva) | | Build | Vite (library mode, ESM) | | Documentation | Storybook (Vite builder) | | Utilities | clsx |

Getting Started

Prerequisites

• Node.js >= 18
• npm >= 9

Install Dependencies

npm install

Development (watch mode)

npm run dev

Build

npm run build

Output:

dist/
├── index.js       # ESM bundle
├── index.d.ts     # Type declarations
└── styles.css     # Compiled CSS with design tokens

Storybook

npm run storybook         # Dev server at http://localhost:6006
npm run build-storybook   # Static build

Project Structure

src/
├── components/
│   ├── Button/          # Variant-driven button (cva)
│   │   ├── Button.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   ├── Input/           # Accessible form input with label & error
│   │   ├── Input.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   ├── Card/            # Composition-based card layout
│   │   ├── Card.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   ├── Box/             # Polymorphic wrapper div
│   │   ├── Box.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   ├── Stack/           # Flex layout (vertical/horizontal)
│   │   ├── Stack.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   └── Modal/           # Accessible portal-based modal
│       ├── Modal.tsx
│       ├── types.ts
│       └── index.ts
├── tokens/
│   ├── colors.ts
│   ├── spacing.ts
│   ├── radius.ts
│   └── index.ts
├── styles.css           # Design tokens as CSS custom properties
└── index.ts             # Barrel export

Design Tokens

All components consume design tokens via CSS custom properties. No hardcoded colors or radius values.

:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-muted: #6b7280;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

Override these variables in your consuming app to theme the entire library.