🎨 UI Component Library (with Storybook)

This is a modular, theme-driven React component library built using:

• ✅ React + TypeScript
• ✅ Tailwind CSS (with CSS variables for themes)
• ✅ Radix UI Primitives (where applicable)
• ✅ Storybook for interactive development & documentation

All components are fully themeable using CSS variables and support both light and dark modes.

🚀 Getting Started

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook


📦 Available Components

| Component      | Description                                                    |
| -------------- | -------------------------------------------------------------- |
| **Button**     | Fully customizable buttons with variants, sizes, icons         |
| **Calendar**   | Base calendar component used by date pickers                   |
| **Checkbox**   | Theme-aware checkbox (based on Radix UI)                       |
| **Chip**       | Small tag-like label for statuses or filters                   |
| **DatePicker** | Select a date or date range (supports presets)                 |
| **Input**      | Standard input field with validation support                   |
| **Modal**      | Accessible modal dialog (with custom header/footer)            |
| **Popover**    | Lightweight popup/tooltip using Radix popover                  |
| **Radio**      | Themeable radio group component                                |
| **Select**     | Dropdown component with search support                         |
| **Slider**     | Customizable slider (range input)                              |
| **Table**      | Scrollable table with sorting, row selection, checkbox support |
| **Tabs**       | Horizontal tab navigation                                      |
| **Textarea**   | Multiline input with styling                                   |
| **Typography** | Design-consistent text system (heading/body/caption)           |


🎨 Theming System
All components rely on CSS variables defined via .theme-* classes.

.theme-default {
  --primary: #1d4ed8;
  --background: #ffffff;
  --text: #111827;
  --border: #e5e7eb;
  /* ...etc */
}

.theme-dark {
  --primary: #3b82f6;
  --background: #111827;
  --text: #f9fafb;
  --border: #334155;
  /* ...etc */
}


You can wrap any part of the app with a div using your desired theme:

<div className="theme-default">
  <Button>Click Me</Button>
</div>



📖 Storybook
Storybook shows live previews of all components.

Run it with pnpm storybook

You can test all themes by changing the .theme-* class in the wrapper inside each story

Every component supports interaction, docs, and controls


📄 License
MIT — Feel free to use, modify, and contribute.