Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
Prerequisites
All components are built with Tailwind CSS and Ark UI, so you need to have these dependencies installed in your project.
Frameworks
Adding components
To add a component you can install it automatically using shadcn CLI or manually copying the files.
Styling
All the colors uses predefined colors from Tailwind CSS and set on the global.css file. It follows the color naming convention from shadcn/ui .
Extended colors
We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:
--destructive-foreground: Foreground color for destructive actions--info: Information state color--info-foreground: Foreground color for information states--success: Success state color--success-foreground: Foreground color for success states--warning: Warning state color--warning-foreground: Foreground color for warning states
These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.