shadcn/ui
Build beautiful UIs with reusable components
What you'll learn
Understand what shadcn/ui is and how it differs from component libraries
Install and configure shadcn/ui in a Next.js project
Add individual components and customize their styling
Override component defaults using Tailwind CSS classes
Theme the entire design system with CSS variables
Extend shadcn/ui with custom compound components
shadcn/ui is a collection of reusable components built with Radix UI and Tailwind CSS.
How It Works
Components are copied into your project, not installed as a package:
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
Each component is a local file you can customize.
Philosophy
- Copy, don't depend — Full control over every component
- Accessible — Built on Radix UI primitives
- Customizable — Tailwind CSS variables for theming
- No lock-in — Delete or modify any component
Available Components
| Category | Components |
|---|---|
| Layout | Card, Container, Separator, ScrollArea |
| Forms | Button, Input, Label, Select, Checkbox |
| Feedback | Alert, Badge, Dialog, Toast |
| Navigation | Tabs, Accordion, Navigation Menu, Sheet |
| Data | Table, Pagination, Command |
Next Steps
Key Takeaways
shadcn/ui is a collection of copy-paste-ready React components, not an npm-installable library
Components are installed individually via the CLI and added to your project's source tree
Each component uses Tailwind CSS classes for styling, making customization straightforward
The entire design system is themed through CSS variables — changing one variable updates all components
shadcn/ui components are built on Radix UI primitives, ensuring accessibility out of the box