All Components
Every shadcn/ui component themed with Material 3 colors.
Accordion
Alert
Default Alert
This is a default alert using the primary color tokens.
Destructive Alert
Something went wrong. Please try again.
Alert Dialog
Aspect Ratio
16:9
Avatar
CNABJD
Badge
DefaultSecondaryDestructiveOutline
Calendar
Carousel
1
2
3
4
5
Card
Card Title
Card description with muted foreground.
Content area using card background and foreground tokens.
Another Card
Demonstrating the card surface color.
Cards use the M3 surface container color mapped to --card.
Chart
Checkbox
Collapsible
3 items
Item 1
Combobox
Command
Dialog
Drawer
Empty
No results found
Try adjusting your search or filters to find what you're looking for.
Hover Card
Input
Input Group
Input OTP
Item
Project Proposal
Last edited 2 hours ago
Meeting Notes
Last edited yesterday
Kbd
Ctrl+CCopy to clipboard
Label
Native Select
Pagination
Popover
Progress
Radio Group
Resizable
Panel A
Panel B
Scroll Area
Select
Separator
Material Design
An open-source design system by Google.
BlogDocsSource
Sheet
Skeleton
Slider
Sonner
Spinner
Loading...
Switch
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Wire Transfer | $350.00 |
Tabs
Manage your account settings and preferences.
Line variant tabs with Material 3 accent colors.