Theme Preview

All shadcn theme tokens β€” switch mode to compare light / dark.

Mode:(also controls global theme)
Fonts
English | δΈ­ζ–‡ | 0123456789
font-sans
β€”
English | δΈ­ζ–‡ | 0123456789
font-heading
β€”
English | δΈ­ζ–‡ | 0123456789
font-mono
β€”
English | δΈ­ζ–‡ | 0123456789
font-dm-sans
β€”
English | δΈ­ζ–‡ | 0123456789
font-space-mono
β€”

Buttons

Brand Colors
Primary
β€”
Primary foreground
β€”
Secondary
β€”
Secondary foreground
β€”
Destructive
β€”
Destructive foreground
β€”
Chart Colors
Chart 1
β€”
Chart 2
β€”
Chart 3
β€”
Chart 4
β€”
Chart 5
β€”
Base Colors
Background
β€”
Foreground
β€”
Card
β€”
Card foreground
β€”
Popover
β€”
Popover foreground
β€”
Other Colors
Muted
β€”
Muted foreground
β€”
Accent
β€”
Accent foreground
β€”
Border
β€”
Input
β€”
Ring
β€”
Sidebar Colors
Sidebar
β€”
Sidebar foreground
β€”
Sidebar primary
β€”
Sidebar primary foreground
β€”
Sidebar accent
β€”
Sidebar accent foreground
β€”
Sidebar border
β€”
Sidebar ring
β€”
Shadows
shadow-2xs
β€”
shadow-xs
β€”
shadow-sm
β€”
shadow
β€”
shadow-md
β€”
shadow-lg
β€”
shadow-xl
β€”
shadow-2xl
β€”
Radius
radius-sm
β€”
radius-md
β€”
radius-lg
β€”
radius-xl
β€”
radius-2xl
β€”
radius-3xl
β€”
radius-4xl
β€”