Button
Displays a button or a component that looks like a button.
Installation
Variants
All available button variants.
Sizes
Different sizes for the button component.
With Icon
Buttons with icons.
Loading
Buttons in a loading state.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| loading | boolean | false | If true, shows a spinner and disables the button. |
| loadingIcon | ReactNode | — | Custom icon for the loading state. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | "default" | Size of the button. |
| disabled | boolean | — | Disables interaction. |
| asChild | boolean | false | If true, the button will render as its child element. |
Input
Displays a form input field or a component that looks like an input field.
Installation
Default
A default input component.
With Label
Input with a label.
With Error
Input with an error message.
Invalid email address
Password
Password input with toggle visibility.
With Icons
Input with start and end icons.
Top Right Element
Input with an element in the top right corner of the label area.
Disabled
Disabled input state.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label for the input field. |
| error | string | string[] | — | Error message(s) to display. |
| icon | string | LucideIcon | — | Icon name (from Lucide) or element to show. |
| iconLeft | ReactNode | — | Custom element to show on the left. |
| iconRight | ReactNode | — | Custom element to show on the right. |
| topRightElement | ReactNode | — | Element to show in top right corner. |
| disabled | boolean | — | Disables interaction. |
Data Table
A robust table component for data-heavy applications with server-side pagination, sorting, and searching.
Installation
Basic Usage
A simple table with search and pagination enabled by default.
| Role | Status | |||
|---|---|---|---|---|
No records found. | ||||
Selectable
Enable row selection and bulk actions.
| Role | Status | Actions | ||||
|---|---|---|---|---|---|---|
No records found. | ||||||
Customizing API Parameters
Map internal table parameters to your specific API structure.
This example demonstrates how to handle sorting and pagination when your API uses different parameter names.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fetcher | Function | — | Async function that fetches data. Receives query params. |
| columns | Column[] | — | Array of column definitions. |
| searchable | boolean | true | Shows the search input. |
| selectable | boolean | false | Enables row selection checkboxes. |
| selectSize | "default" | "sm" | "lg" | "sm" | Size of the rows-per-page selector. |
| perPageOptions | number[] | [10, 15, 25, 50, 100] | Available rows-per-page options. |
| onSelectionChange | (rows: T[]) => void | — | Callback when row selection changes. |
| searchPlaceholder | string | "Search..." | Placeholder for search input. |
| rightItems | ReactNode | — | Elements to show on the right of search bar. |
| selectableContent | ReactNode | — | Content to show when rows are selected. |
Column Definition
| Property | Type | Description |
|---|---|---|
| key | string | The data property to display in this column. |
| head | ReactNode | The column header label. |
| sortable | boolean | Enables sorting functionality for this column. |
| render | Function | Custom render function: (value, row) => ReactNode |
Expected API Response
The fetcher should return a Promise that resolves to an object with the following structure:
{
"data": [ ...your items ],
"current_page": 1,
"last_page": 10,
"total": 100,
"from": 1,
"to": 10
}Textarea
A multi-line text input field with support for labels, descriptions, and validation states.
Installation
Default
A default textarea component.
With Label
Textarea with a label.
With Error
Textarea with an error message.
Message is too short
Top Right Element
Textarea with an element in the top right corner of the label area.
Icons
Textarea with icons on either side.
Disabled
Disabled textarea state.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label for the textarea field. |
| error | string | string[] | — | Error message(s) to display. |
| icon | string | LucideIcon | — | Icon name (from Lucide) or element to show. |
| iconLeft | ReactNode | — | Custom element to show on the left. |
| iconRight | ReactNode | — | Custom element to show on the right. |
| topRightElement | ReactNode | — | Element to show in top right corner. |
| disabled | boolean | — | Disables interaction. |
Select
A customizable dropdown list for picking values from a set of options.
Installation
Default Usage
A basic select component with a set of options.
With Label
Select component with an associated label.
With Error
Select component showing an error state.
Please select a valid option
Disabled
Disabled select and disabled options.
Icons
Select with icons in the trigger and individual options.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Option[] | [] | Selection options. Label/Value pairs. |
| label | string | — | Label for the select field. |
| error | string | string[] | — | Error message(s) to display. |
| placeholder | string | "Select an option" | Placeholder text. |
| value | string | — | Controlled value of the select. |
| defaultValue | string | — | Initial value. |
| onValueChange | (val: string) => void | — | Callback when value changes. |
| topRightElement | ReactNode | — | Element to show in top right corner. |
Option Type
interface Option {
label: string;
value: string;
disabled?: boolean;
}Multi-Select Input
An advanced, searchable select component supporting single and multi-selection, async searching, and item creation.
Installation
Basic Usage
A simple searchable single select.
Multi-Select (Chips)
Select multiple items with visual chip indicators.
Multi-Select (Count Only)
A more compact multi-select that only shows the total count.
Creatable & Async
Search through an API or add your own custom options.
Search Focused
Hide initial data and force the user to start searching.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label for the input field. |
| options | Option[] | [] | Selection options. |
| value | any | — | Controlled value (string or string[]). |
| multi | boolean | false | Enable multiple selection mode. |
| creatable | boolean | false | Allow creating items not in options. |
| showInitialData | boolean | false | Show options on focus without typing. |
| showCountOnly | boolean | false | Show selection count instead of chips. |
| loading | boolean | false | Show loading state in dropdown. |
| onSearch | (query: string) => void | — | Callback when search query changes. |