shadcn-ui
shadcn/ui is not a component library in the traditional sense — it is a collection of reusable, beautifully designed React components that you copy and paste in…
Installation
npx shadcn-ui@latest init
yarn add npx shadcn-ui@latest init
pnpm add npx shadcn-ui@latest init
Import
import { Button } from '@/components/ui/button';Quick Example
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
function App() {
return (
<Card>
<CardHeader>
<CardTitle>Hello</CardTitle>
</CardHeader>
<CardContent>
<Button variant="outline">Click me</Button>
</CardContent>
</Card>
);
}About shadcn-ui
shadcn/ui is not a component library in the traditional sense — it is a collection of reusable, beautifully designed React components that you copy and paste into your project, giving you full ownership and control over the code. Built on top of Radix UI primitives for accessibility and Tailwind CSS for styling, shadcn/ui provides a CLI tool (npx shadcn-ui@latest add button) that adds component source code directly to your project rather than installing it as a dependency. This means you can customize every aspect of every component without fighting library abstractions or override systems. The collection includes over 40 components covering buttons, cards, dialogs, dropdowns, forms, tables, tabs, toasts, date pickers, command palettes, and more. Each component follows consistent design patterns with dark mode support, responsive behavior, and accessibility built in. The CLI handles dependency installation, Tailwind configuration, and component file creation. shadcn/ui has become the most popular way to build React UIs with Tailwind CSS, adopted by thousands of projects and recommended by Vercel. The collection is continuously expanded with new components and patterns, and its design has influenced a new generation of 'copy-paste' component collections.
Quick Facts
| Package | shadcn-ui |
| Category | UI Component |
| Weekly Downloads | 100K+ |
| License | MIT |
| Install | npx shadcn-ui@latest init |
Related Packages
Radix UI is a collection of unstyled, accessible React component primitives for building high-qualit…
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building c…
React is the most popular JavaScript library for building user interfaces, developed and maintained …
Next.js is the leading React framework for building full-stack web applications, developed and maint…
Headless UI is a collection of completely unstyled, fully accessible React and Vue UI components des…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.