# Building Beautiful UIs with shadcn/ui
shadcn/ui has revolutionized how we build React components by providing a collection of copy-and-paste components built on top of Radix UI and Tailwind CSS.
## Why shadcn/ui?
### Copy, Don't Install
Unlike traditional component libraries, shadcn/ui components are copied directly into your project:
- **Full control** over the code
- **Easy customization** without fighting the library
- **No bundle bloat** from unused components
- **TypeScript first** with excellent type safety
### Built on Solid Foundations
- **Radix UI** for accessibility and behavior
- **Tailwind CSS** for styling
- **Class Variance Authority** for component variants
- **Lucide React** for consistent icons
## Getting Started
1. **Initialize shadcn/ui in your project:**
```bash
npx shadcn-ui@latest init
```
2. **Add components as needed:**
```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
```
## Component Examples
### Button Variants
```tsx
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="flex gap-2">
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
)
}
```
### Form with Validation
```tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function LoginForm() {
return (
<form className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
<div>
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" />
</div>
<Button type="submit" className="w-full">
Sign In
</Button>
</form>
)
}
```
## Customization
The beauty of shadcn/ui is in its customizability. Since you own the code, you can:
- Modify component styles directly
- Add new variants using CVA
- Extend functionality as needed
- Maintain consistency across your design system
Start building beautiful, accessible UIs with shadcn/ui today!