styling-with-shadcnlisted
Install: claude install-skill aiskillstore/marketplace
# shadcn/ui
Build beautiful, accessible UIs with copy-paste components built on Radix UI and Tailwind CSS.
## Quick Start
```bash
# Initialize shadcn/ui in your Next.js project
npx shadcn@latest init
# Add components as needed
npx shadcn@latest add button form dialog table sidebar
```
## Common Component Install
```bash
npx shadcn@latest add button card form input label dialog \
table badge sidebar dropdown-menu avatar separator \
select textarea tabs toast sonner
```
---
## Core Patterns
### 1. Button Variants
```tsx
import { Button } from "@/components/ui/button"
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
// Sizes: sm, default, lg, icon
<Button size="icon"><Plus /></Button>
// Loading state
<Button disabled>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Loading...
</Button>
// As Next.js Link
<Button asChild>
<Link href="/dashboard">Go to Dashboard</Link>
</Button>
```
### 2. Forms with react-hook-form + Zod
```tsx
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
const schema = z.object({
title: z.string().min(1, "Required"),