shadcn-ui
A stark, developer-first design system built on a white canvas with near-black primary actions and Vercel's open-source Geist typeface. The landing surface reads as a component showroom — dense grids of soft-rounded cards (charts, forms, chat, QR, navigation lists) shown as live product chrome rather than marketing illustration. Voltage comes entirely from monochrome contrast, generous rounding on showcase cards, and a single confident Geist display headline; color accents (indigo, blues, reds) live only inside the demo components, never on the brand chrome.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
48px · 600 · 1.1
The quick brown fox jumps
body
18px · 400 · 1.556
The quick brown fox jumps
button
14px · 500 · 1.429
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 6px | |
| sm | 8px | |
| smd | 10px | |
| md | 12px | |
| mdl | 14px | |
| lg | 16px | |
| xl | 20px | |
| xxl | 24px | |
| xxxl | 48px | |
| section | 80px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 6px | |
| sm | 8px | |
| md | 10px | |
| lg | 14px | |
| xl | 18px | |
| xxl | 20px | |
| xxxl | 24px |
FAQ
- What colors does shadcn-ui use?
- shadcn-ui's core palette includes #000000, #0a0a0a, #171717, #262626, #404040. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the shadcn-ui DESIGN.md.
- What font does shadcn-ui use?
- shadcn-ui's primary typeface is Geist. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the shadcn-ui design system?
- A stark, developer-first design system built on a white canvas with near-black primary actions and Vercel's open-source Geist typeface. The landing surface reads as a component showroom — dense grids…