Preview
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Body text - The quick brown fox jumps over the lazy dog. This paragraph demonstrates the body font, base size, line height, and letter spacing of your current theme configuration.
Small text - Secondary information that uses the muted foreground color and smaller text size.
Button
Card
Card Title
No Footer
Alert
Default
Success
Warning
Error
Badge
Default
Secondary
Success
Warning
Destructive
Input
Table
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Editor |
| Charlie | charlie@example.com | Viewer |
Tabs
Content for tab 1.
Content for tab 2.
Content for tab 3.
Progress
50%
75%
Toast
Animation
Hover Lift
translateY + scale
Hover Scale
scale transform
Hover Glow
box-shadow glow
Click to see speed
Radius & Shadow
sm
md
lg
xl
full
shadow-sm
shadow-md
shadow-lg
shadow-xl
Spacing Scale
1
2
3
4
6
8
12
16
24