shadcn/ui Cheat Sheet
Quick reference for shadcn/ui: installation, components, theming, and customization patterns. Build beautiful React UIs with accessible, copy-paste components.
Installation & Setup
| npx shadcn-ui@latest init | Initialize shadcn/ui in your project (creates components.json) |
| npx shadcn-ui@latest add button | Add a single component to your project |
| npx shadcn-ui@latest add button card dialog | Add multiple components at once |
| npx shadcn-ui@latest diff | Check for updates to installed components |
| npx shadcn-ui@latest add --all | Install all available components |
Core Components
| <Button variant="default">Click</Button> | Primary button (default, destructive, outline, secondary, ghost, link) |
| <Card><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>...</CardContent></Card> | Card with header, title, and content sections |
| <Dialog><DialogTrigger>Open</DialogTrigger><DialogContent>...</DialogContent></Dialog> | Modal dialog with trigger and content |
| <Sheet><SheetTrigger>Open</SheetTrigger><SheetContent side="right">...</SheetContent></Sheet> | Slide-out panel (side: top, right, bottom, left) |
| <Tabs defaultValue="tab1"><TabsList><TabsTrigger value="tab1">Tab</TabsTrigger></TabsList><TabsContent value="tab1">...</TabsContent></Tabs> | Tabbed content with triggers and panels |
Form Components
| <Input type="text" placeholder="Email" /> | Styled text input with placeholder |
| <Select><SelectTrigger><SelectValue placeholder="Pick" /></SelectTrigger><SelectContent><SelectItem value="a">A</SelectItem></SelectContent></Select> | Dropdown select with trigger, value, and items |
| <Checkbox checked={val} onCheckedChange={setVal} /> | Controlled checkbox with checked state |
| <Switch checked={on} onCheckedChange={setOn} /> | Toggle switch component |
| <Textarea placeholder="Message..." className="min-h-[100px]" /> | Multi-line textarea with custom height |
Data Display
| <Table><TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader><TableBody>...</TableBody></Table> | Data table with header and body sections |
| <Badge variant="secondary">New</Badge> | Badge/tag (default, secondary, destructive, outline) |
| <Avatar><AvatarImage src="/img.png" /><AvatarFallback>CN</AvatarFallback></Avatar> | Avatar with image and fallback initials |
| <Tooltip><TooltipTrigger>Hover</TooltipTrigger><TooltipContent>Info</TooltipContent></Tooltip> | Tooltip on hover (wrap in TooltipProvider) |
| <Skeleton className="h-4 w-[200px]" /> | Loading placeholder skeleton with custom dimensions |
Theming & Customization
| @layer base { :root { --background: 0 0% 100%; --foreground: 222 84% 5%; } } | Define CSS variables for light theme in globals.css |
| .dark { --background: 222 84% 5%; --foreground: 210 40% 98%; } | Define dark theme CSS variables |
| className={cn("default-class", className)} | Merge classes with cn() utility (clsx + tailwind-merge) |
| const buttonVariants = cva("base-classes", { variants: { size: { sm: "h-8", lg: "h-12" } } }) | Create component variants with class-variance-authority |
| <Button className="bg-brand-500 hover:bg-brand-600">Custom</Button> | Override component styles with Tailwind classes |
Step-by-Step Guide
Read Guide →