shadcn/ui Essentials
Production-ready UI components from shadcn/ui — built on Radix UI and Tailwind CSS. Clean, accessible, and composable primitives for any React project.
ui-libraryv4.0.033 tokens14 components
Colors15 tokens
accenthsl(240 4.8% 95.9%)
backgroundhsl(0 0% 100%)
borderhsl(240 5.9% 90%)
cardhsl(0 0% 100%)
card-foregroundhsl(240 10% 3.9%)
destructivehsl(0 84.2% 60.2%)
foregroundhsl(240 10% 3.9%)
inputhsl(240 5.9% 90%)
mutedhsl(240 4.8% 95.9%)
muted-foregroundhsl(240 3.8% 46.1%)
primaryhsl(240 5.9% 10%)
primary-foregroundhsl(0 0% 98%)
ringhsl(240 5.9% 10%)
secondaryhsl(240 4.8% 95.9%)
secondary-foregroundhsl(240 5.9% 10%)
Typography3 tokens
Aa
bodyInter, system-ui, sans-serifAa
headingInter, system-ui, sans-serifAa
monoJetBrains Mono, monospaceThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Border Radius4 tokens
lg0.5rem
mdcalc(0.5rem)
smcalc(0.5rem - 2px)
xl0.75rem
Shadows3 tokens
md
sm
xs
Elevation3 tokens
high
low
mid
Spacing5 tokens
lg1.5rem
md1rem
sm0.5rem
xl2rem
xs0.25rem