Theme Preview

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

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

Variants

With Icons

Sizes

States

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
β€”