1# shadcn/ui Component Reference
2 
3Complete catalog of shadcn/ui components with usage patterns and installation.
4 
5## Installation
6 
7**Add specific components:**
8```bash
9npx shadcn@latest add button
10npx shadcn@latest add button card dialog  # Multiple
11npx shadcn@latest add --all              # All components
12```
13 
14Components install to `components/ui/` with automatic dependency management.
15 
16## Form & Input Components
17 
18### Button
19```tsx
20import { Button } from "@/components/ui/button"
21 
22<Button variant="default">Default</Button>
23<Button variant="destructive">Delete</Button>
24<Button variant="outline" size="sm">Small Outline</Button>
25<Button variant="ghost" size="icon"><Icon /></Button>
26<Button variant="link">Link Style</Button>
27```
28 
29Variants: `default | destructive | outline | secondary | ghost | link`
30Sizes: `default | sm | lg | icon`
31 
32### Input
33```tsx
34import { Input } from "@/components/ui/input"
35import { Label } from "@/components/ui/label"
36 
37<div className="space-y-2">
38  <Label htmlFor="email">Email</Label>
39  <Input id="email" type="email" placeholder="[email protected]" />
40</div>
41```
42 
43### Form (with React Hook Form + Zod)
44```tsx
45import { useForm } from "react-hook-form"
46import { zodResolver } from "@hookform/resolvers/zod"
47import * as z from "zod"
48import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
49import { Input } from "@/components/ui/input"
50import { Button } from "@/components/ui/button"
51 
52const schema = z.object({
53  username: z.string().min(2).max(50),
54  email: z.string().email()
55})
56 
57function ProfileForm() {
58  const form = useForm({
59    resolver: zodResolver(schema),
60    defaultValues: { username: "", email: "" }
61  })
62 
63  return (
64    <Form {...form}>
65      <form onSubmit={form.handleSubmit(console.log)} className="space-y-8">
66        <FormField control={form.control} name="username" render={({ field }) => (
67          <FormItem>
68            <FormLabel>Username</FormLabel>
69            <FormControl>
70              <Input placeholder="shadcn" {...field} />
71            </FormControl>
72            <FormMessage />
73          </FormItem>
74        )} />
75        <Button type="submit">Submit</Button>
76      </form>
77    </Form>
78  )
79}
80```
81 
82### Select
83```tsx
84import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
85 
86<Select>
87  <SelectTrigger className="w-[180px]">
88    <SelectValue placeholder="Theme" />
89  </SelectTrigger>
90  <SelectContent>
91    <SelectItem value="light">Light</SelectItem>
92    <SelectItem value="dark">Dark</SelectItem>
93    <SelectItem value="system">System</SelectItem>
94  </SelectContent>
95</Select>
96```
97 
98### Checkbox
99```tsx
100import { Checkbox } from "@/components/ui/checkbox"
101import { Label } from "@/components/ui/label"
102 
103<div className="flex items-center space-x-2">
104  <Checkbox id="terms" />
105  <Label htmlFor="terms">Accept terms</Label>
106</div>
107```
108 
109### Radio Group
110```tsx
111import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
112import { Label } from "@/components/ui/label"
113 
114<RadioGroup defaultValue="option-one">
115  <div className="flex items-center space-x-2">
116    <RadioGroupItem value="option-one" id="option-one" />
117    <Label htmlFor="option-one">Option One</Label>
118  </div>
119  <div className="flex items-center space-x-2">
120    <RadioGroupItem value="option-two" id="option-two" />
121    <Label htmlFor="option-two">Option Two</Label>
122  </div>
123</RadioGroup>
124```
125 
126### Textarea
127```tsx
128import { Textarea } from "@/components/ui/textarea"
129 
130<Textarea placeholder="Type your message here." />
131```
132 
133### Switch
134```tsx
135import { Switch } from "@/components/ui/switch"
136import { Label } from "@/components/ui/label"
137 
138<div className="flex items-center space-x-2">
139  <Switch id="airplane-mode" />
140  <Label htmlFor="airplane-mode">Airplane Mode</Label>
141</div>
142```
143 
144### Date Picker
145```tsx
146import { Calendar } from "@/components/ui/calendar"
147import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
148import { Button } from "@/components/ui/button"
149import { CalendarIcon } from "lucide-react"
150import { format } from "date-fns"
151import { useState } from "react"
152 
153const [date, setDate] = useState<Date>()
154 
155<Popover>
156  <PopoverTrigger asChild>
157    <Button variant="outline">
158      <CalendarIcon className="mr-2 h-4 w-4" />
159      {date ? format(date, "PPP") : "Pick a date"}
160    </Button>
161  </PopoverTrigger>
162  <PopoverContent className="w-auto p-0">
163    <Calendar mode="single" selected={date} onSelect={setDate} />
164  </PopoverContent>
165</Popover>
166```
167 
168## Layout & Navigation
169 
170### Card
171```tsx
172import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
173 
174<Card>
175  <CardHeader>
176    <CardTitle>Card Title</CardTitle>
177    <CardDescription>Card Description</CardDescription>
178  </CardHeader>
179  <CardContent>
180    <p>Card Content</p>
181  </CardContent>
182  <CardFooter>
183    <Button>Action</Button>
184  </CardFooter>
185</Card>
186```
187 
188### Tabs
189```tsx
190import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
191 
192<Tabs defaultValue="account">
193  <TabsList>
194    <TabsTrigger value="account">Account</TabsTrigger>
195    <TabsTrigger value="password">Password</TabsTrigger>
196  </TabsList>
197  <TabsContent value="account">Account settings</TabsContent>
198  <TabsContent value="password">Password settings</TabsContent>
199</Tabs>
200```
201 
202### Accordion
203```tsx
204import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
205 
206<Accordion type="single" collapsible>
207  <AccordionItem value="item-1">
208    <AccordionTrigger>Is it accessible?</AccordionTrigger>
209    <AccordionContent>
210      Yes. It adheres to WAI-ARIA design pattern.
211    </AccordionContent>
212  </AccordionItem>
213  <AccordionItem value="item-2">
214    <AccordionTrigger>Is it styled?</AccordionTrigger>
215    <AccordionContent>
216      Yes. Comes with default styles customizable with Tailwind.
217    </AccordionContent>
218  </AccordionItem>
219</Accordion>
220```
221 
222### Navigation Menu
223```tsx
224import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu"
225 
226<NavigationMenu>
227  <NavigationMenuList>
228    <NavigationMenuItem>
229      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
230      <NavigationMenuContent>
231        <NavigationMenuLink>Introduction</NavigationMenuLink>
232        <NavigationMenuLink>Installation</NavigationMenuLink>
233      </NavigationMenuContent>
234    </NavigationMenuItem>
235  </NavigationMenuList>
236</NavigationMenu>
237```
238 
239## Overlays & Dialogs
240 
241### Dialog
242```tsx
243import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
244 
245<Dialog>
246  <DialogTrigger asChild>
247    <Button>Open</Button>
248  </DialogTrigger>
249  <DialogContent>
250    <DialogHeader>
251      <DialogTitle>Are you sure?</DialogTitle>
252      <DialogDescription>This action cannot be undone.</DialogDescription>
253    </DialogHeader>
254  </DialogContent>
255</Dialog>
256```
257 
258### Drawer
259```tsx
260import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
261 
262<Drawer>
263  <DrawerTrigger>Open</DrawerTrigger>
264  <DrawerContent>
265    <DrawerHeader>
266      <DrawerTitle>Title</DrawerTitle>
267      <DrawerDescription>Description</DrawerDescription>
268    </DrawerHeader>
269    <DrawerFooter>
270      <Button>Submit</Button>
271      <DrawerClose>Cancel</DrawerClose>
272    </DrawerFooter>
273  </DrawerContent>
274</Drawer>
275```
276 
277### Popover
278```tsx
279import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
280 
281<Popover>
282  <PopoverTrigger>Open</PopoverTrigger>
283  <PopoverContent>Content here</PopoverContent>
284</Popover>
285```
286 
287### Toast
288```tsx
289import { useToast } from "@/hooks/use-toast"
290import { Button } from "@/components/ui/button"
291 
292const { toast } = useToast()
293 
294<Button onClick={() => {
295  toast({
296    title: "Scheduled: Catch up",
297    description: "Friday, February 10, 2023 at 5:57 PM"
298  })
299}}>
300  Show Toast
301</Button>
302```
303 
304### Command
305```tsx
306import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
307 
308<Command>
309  <CommandInput placeholder="Type a command or search..." />
310  <CommandList>
311    <CommandEmpty>No results found.</CommandEmpty>
312    <CommandGroup heading="Suggestions">
313      <CommandItem>Calendar</CommandItem>
314      <CommandItem>Search Emoji</CommandItem>
315      <CommandItem>Calculator</CommandItem>
316    </CommandGroup>
317  </CommandList>
318</Command>
319```
320 
321### Alert Dialog
322```tsx
323import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
324 
325<AlertDialog>
326  <AlertDialogTrigger asChild>
327    <Button variant="destructive">Delete</Button>
328  </AlertDialogTrigger>
329  <AlertDialogContent>
330    <AlertDialogHeader>
331      <AlertDialogTitle>Absolutely sure?</AlertDialogTitle>
332      <AlertDialogDescription>
333        This permanently deletes your account and removes data from servers.
334      </AlertDialogDescription>
335    </AlertDialogHeader>
336    <AlertDialogFooter>
337      <AlertDialogCancel>Cancel</AlertDialogCancel>
338      <AlertDialogAction>Continue</AlertDialogAction>
339    </AlertDialogFooter>
340  </AlertDialogContent>
341</AlertDialog>
342```
343 
344## Feedback & Status
345 
346### Alert
347```tsx
348import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
349 
350<Alert>
351  <AlertTitle>Heads up!</AlertTitle>
352  <AlertDescription>You can add components using CLI.</AlertDescription>
353</Alert>
354 
355<Alert variant="destructive">
356  <AlertTitle>Error</AlertTitle>
357  <AlertDescription>Session expired. Please log in.</AlertDescription>
358</Alert>
359```
360 
361### Progress
362```tsx
363import { Progress } from "@/components/ui/progress"
364 
365<Progress value={33} />
366```
367 
368### Skeleton
369```tsx
370import { Skeleton } from "@/components/ui/skeleton"
371 
372<div className="flex items-center space-x-4">
373  <Skeleton className="h-12 w-12 rounded-full" />
374  <div className="space-y-2">
375    <Skeleton className="h-4 w-[250px]" />
376    <Skeleton className="h-4 w-[200px]" />
377  </div>
378</div>
379```
380 
381## Display Components
382 
383### Table
384```tsx
385import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
386 
387<Table>
388  <TableCaption>Recent invoices</TableCaption>
389  <TableHeader>
390    <TableRow>
391      <TableHead>Invoice</TableHead>
392      <TableHead>Status</TableHead>
393      <TableHead>Amount</TableHead>
394    </TableRow>
395  </TableHeader>
396  <TableBody>
397    <TableRow>
398      <TableCell>INV001</TableCell>
399      <TableCell>Paid</TableCell>
400      <TableCell>$250.00</TableCell>
401    </TableRow>
402  </TableBody>
403</Table>
404```
405 
406### Avatar
407```tsx
408import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
409 
410<Avatar>
411  <AvatarImage src="https://github.com/shadcn.png" />
412  <AvatarFallback>CN</AvatarFallback>
413</Avatar>
414```
415 
416### Badge
417```tsx
418import { Badge } from "@/components/ui/badge"
419 
420<Badge>Default</Badge>
421<Badge variant="secondary">Secondary</Badge>
422<Badge variant="destructive">Destructive</Badge>
423<Badge variant="outline">Outline</Badge>
424```
425