shadcn/ui
Accessible components built with Radix UI and Tailwind CSS
Color Palette
Typography — Inter
Build your component library
Beautifully designed components
Open Source & Customizable
Accessible by default
Copy and paste into your apps
Works with your favorite frameworks
This is not a component library. It is a collection of re-usable components that you can copy and paste into your apps. Accessible. Open Source. Customizable.
Last updated · 2 minutes ago
Buttons
Primary
Solid zinc-900 background, white text, 6px radius, subtle focus ring
Outline
Transparent background, zinc border, hover fills with accent
Ghost
No border, hover accent background
Dark Surface
Buttons on dark backgrounds
Form Inputs
Badges & Tags
Surfaces & Cards
Default Card
White surface with subtle border. Use for primary content containers.
Muted Section
Zinc-100 background for grouped secondary content.
Accent Panel
Light accent fill for highlighted callouts.
Dark Panel
Inverted surface for code blocks or hero sections.
Border Radius Scale
4px
6px
8px
12px
pill
Component Example
Copy & Paste
Components live in your codebase — not node_modules.
Accessible
Built on Radix UI primitives with ARIA support.
Themeable
CSS variables make light and dark mode effortless.
Design Tokens
| Token | Value | Usage |
|---|---|---|
--background | #FFFFFF | Page background |
--foreground | #09090B | Primary text |
--primary | #18181B | Primary button bg |
--secondary | #F4F4F5 | Secondary surfaces |
--muted | #F4F4F5 | Muted backgrounds |
--border | #E4E4E7 | Borders & inputs |
--radius | 0.5rem | Default border radius |