Overview
Shadcn/ui provides beautifully designed, accessible components built with Radix UI primitives and Tailwind CSS. Copy code directly into your project without installing dependencies.
Key Features
- Copy-Paste Approach: Components live in your codebase
- Fully Accessible: Built on Radix UI standards
- Tailwind Styled: All components use Tailwind CSS
- Dark Mode: Built-in dark mode support
- Customizable: Easily modify and extend components
Quick Start
npx shadcn-ui@latest init
Use Components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog
Component Examples
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
export function Dashboard() {
return (
<Card>
<CardHeader>
<CardTitle>Welcome</CardTitle>
</CardHeader>
<CardContent>
<Button>Click me</Button>
</CardContent>
</Card>
)
}
Available Components
- Button, Card, Dialog, Dropdown Menu
- Input, Textarea, Select, Checkbox, Radio
- Alert, Badge, Breadcrumb, Pagination
- Tabs, Accordion, Tooltip, Popover
- And 30+ more...
Shadcn/ui gives you production-ready components you can own and modify.