Component reference
Projection UI 0.1.5 archive
You are reading version 0.1.5. This archive retains its original API and installation requirements. Open the current alpha documentation.
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 and theme types.