Shadcn Shadcn Shadcn
Scroll down to explore the different colors & components Shadcn provides.
Use the switcher to view other libraries.
Typography
Shadcn uses Tailwind's default text utility classes in its components.
Example text
className="text-9xl"
Example text
className="text-8xl"
Example text
className="text-7xl"
Example text
className="text-6xl"
Example text
className="text-5xl"
= h1
Example text
className="text-4xl"
= h2
Example text
className="text-3xl"
= h3
Example text
className="text-2xl"
= h4
Example text
className="text-xl"
= h5
Example text
className="text-lg"
= h6
Example text
className="text-base"
= body / p
Example text
className="text-xs"
Colors
Shadcn provides Tailwind color utility classes used by its components by default.
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
secondary
secondary-foreground
accent
accent-foreground
muted
muted-foreground
input
placeholder
destructive
placeholder
border
placeholder
ring
placeholder
sidebar
sidebar-primary
sidebar-accent
sidebar-border
sidebar-ring