Home
DESIGN.mdStar on GitHub

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

$npx shadcn@latest add button card
Colors · semantic tokens
Core (Zinc default)
Primary · Secondary · Semantic
Base-color presets (swap --primary)
Typography
Geist / 600
Display · hero · 48px · -.03em
The Foundation for your Design System
Geist
Geist / 600
Card title · 16px
Create an account
Geist
Geist / 400
Body · muted-foreground · 14px
Enter your email below to create your account.
Geist
Geist Mono / 400
Code · tokens · CLI · 13px
npx shadcn@latest add button
Geist Mono
Signature · Theme customizer
Customize
Pick a color & radius — then copy the CSS
Color
Radius

Create an account

Enter your email below to create your account.
Or continue with
Button
Badge
Default Secondary Outline Destructive
Tabs
Switch
Email notifications
Receive emails about your account activity.
Pick a base color and radius — every component re-skins live from scoped CSS variables (--primary, --ring, --radius). Hit Copy code for the tokens to paste into your project. Toggle light/dark with the switch, top-right.
Components
Button variants
Input · focus ring
Badges
Default Secondary Outline Destructive
Radius scale · --radius
0
.25
.5
.75
1.0
Guardrails
Do
Keep surfaces monochrome (zinc); let a single --primary carry any color.
Drive everything from semantic tokens — never hardcode a hex on a component.
Separate with 1px --border, not shadows; scale corners with one --radius.
Use --muted-foreground for descriptions, --foreground for content.
Set primary-button text to --primary-foreground (Zinc flips, Orange goes dark).
Don't
Don't add a loud default brand hue — neutrality is the identity.
Don't lean on drop shadows for hierarchy — borders and spacing do the work.
Don't mix font roles — Geist for UI, Geist Mono for code/tokens.
Don't hardcode button text color, or a theme breaks in one mode.
Don't use Math.random() — the customizer presets are deterministic.