Text Hierarchy
Headings
H1 - 4xl font-bold
The quick brown fox jumps over the lazy dog
H2 - 3xl font-semibold
The quick brown fox jumps over the lazy dog
H3 - 2xl font-semibold
The quick brown fox jumps over the lazy dog
H4 - xl font-semibold
The quick brown fox jumps over the lazy dog
Body Text
Base - text-base
Design is not just what it looks like and feels like. Design is how it works. Good design is obvious. Great design is transparent.
Muted - text-muted-foreground
This is a secondary text style used for labels, captions, and supplementary information.
Special Styles
Lead - text-xl
A modal window that interrupts the user with important content.
Small - text-sm font-medium
Email address
Large - text-lg font-semibold
Are you absolutely sure?
Inputs & Forms
Button
Input
Textarea
Checkbox
Radio Group
Select
Switch
Slider
Input OTP
Label
Data Display
Avatar
CNABCD
Badge
DefaultSecondaryOutlineDestructive
Card
Table
| Name | Status | Amount |
|---|---|---|
| Alice | Active | $250.00 |
| Bob | Pending | $150.00 |
| Charlie | Active | $350.00 |
Calendar
Carousel
1
2
3
4
5
Hover Card
Hover meAspect Ratio
16:9
Separator
Content above
Content below
LeftRight
Skeleton
Progress
Scroll Area
Navigation
Breadcrumb
Tabs
Account settings and preferences.
Pagination
Menubar
Navigation Menu
Command Palette
Feedback
Alert
Info
This is an informational alert.
Error
Something went wrong.
Toast (Sonner)
Dialog
Alert Dialog
Sheet
Drawer
Popover
Tooltip
Layout
Accordion
Collapsible
3 items
Item 1
Resizable Panels
Panel A
Panel B
Context Menu
Right click here