Component Showcase
Try switching between different color themes and light/dark modes using the toggles in the header. Watch how all the components adapt to your selected theme!
Bar Chart
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Pie Chart - Donut with Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Horizontal
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Card Title
Card Description
This is some content inside the card.
Input Fields
Toggle Controls
Radio Group
Progress & Slider
Tabs
Account content.
Avatar
CN
Badge
Badge
Alert
Heads up!
You can add components to your app using the cli.
Table
| Name | Role | Status |
|---|---|---|
| John Doe | Admin | Active |
| Jane Smith | Editor | Inactive |
Tooltip
Popover
Select
Textarea
Separator
Above the separator
Below the separator
Calendar
June 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Command Menu
No results found.
Calendar
Search Emoji
Profile
Settings
Dialog
Scroll Area
Skeleton Loading
Toast
How to Use
Mode Toggle (Sun/Moon): Switch between light, dark, and system theme modes
Color Toggle (Palette): Choose from 8 different color themes including default, red, rose, orange, green, blue, yellow, and violet