Features
- Copy-paste components — you own the code
- Built on Radix UI primitives for accessibility
- Styled with Tailwind CSS
- CLI for adding individual components
- Fully customizable with CSS variables theming
Pros
- Full ownership and control over component code
- Accessible by default through Radix primitives
- No version lock-in — components are in your codebase
- Beautifully designed with consistent aesthetics
Cons
- Manual updates — no automatic dependency upgrades
- React-only (community ports for other frameworks exist)
- Requires Tailwind CSS as a dependency
Overview
shadcn/ui is not a component library in the traditional sense — it’s a collection of beautifully designed, accessible components that you copy into your project. Built on Radix UI primitives for accessibility and styled with Tailwind CSS, each component becomes part of your codebase that you can customize freely.
The approach solves a common problem with traditional component libraries: the tension between consistency and customization. Since you own the code, you can modify any component without fighting library abstractions or waiting for upstream changes. The CLI (npx shadcn@latest add button) makes it easy to add individual components.
When to Use
shadcn/ui is the right choice when you want beautiful, accessible components with full customization control, when you’re already using Tailwind CSS and React, or when you need components that you can freely modify without being constrained by a library’s API.
Getting Started
npx shadcn@latest init
npx shadcn@latest add buttonimport { Button } from "@/components/ui/button";
function App() {
return (
<div>
<Button variant="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</div>
);
}