# Component reference

### Layout

| Component | Description |
|---|---|
| `ThemeProvider` | Writes CSS vars from your theme. Wrap your app root. |
| `Card` | Surface container. Props: `padding`, `border`, `as`, `className` |

### Actions

| Component | Description |
|---|---|
| `Button` | Variants: `primary` `secondary` `ghost` `danger`. Sizes: `sm` `md` `lg`. |
| `ButtonGroup` | Segmented control / tab bar. Mutually exclusive options with optional deselect. |

### Forms

| Component | Description |
|---|---|
| `Input` | Text input with label, error, hint, prefix/suffix slots |
| `Select` | Styled native select with chevron |
| `Textarea` | Resizable textarea with label, error, hint |
| `Toggle` | On/off switch. Sizes: `sm` `md` |
| `Slider` | Range input with fill track, value display, and min/max labels |

### Feedback

| Component | Description |
|---|---|
| `Modal` | Accessible dialog. Closes on Escape + backdrop click. |
| `ToastContainer` | Notification portal. Use `useToastStore().push(message, variant)` to trigger. |
| `Skeleton` | Shimmer placeholder. Configurable width, height, borderRadius. |

### Data

| Component | Description |
|---|---|
| `DataTable` | Sortable columns, loading skeletons, empty state slot, row click handler |

### Drag and drop

| Component | Description |
|---|---|
| `SortableList` | Wraps `@dnd-kit` DndContext + SortableContext |
| `SortableItem` | Render-prop item exposing `dragHandleProps` and `isDragging` |

### Charts (Recharts wrappers)

| Component | Description |
|---|---|
| `AreaChart` | Gradient fill area chart |
| `BarChart` | Grouped or stacked bar chart |
| `LineChart` | Multi-series line chart |
| `DonutChart` | Pie/donut with optional center label slot |

All charts accept `data`, `series` (array of `{ key, color, label }`), `xKey`, `height`, `title`, `xFormatter`, `yFormatter`.


## Source reference

Read the [original exports](https://github.com/hannasage/projection-ui/blob/8362d8b36b8d4928525aac16ebf5cc382e862f2c/src/components/index.ts) and [theme types](https://github.com/hannasage/projection-ui/blob/8362d8b36b8d4928525aac16ebf5cc382e862f2c/src/theme.ts).