1# shadcn/ui - UI Components Reference
2 
3## Button
4 
5```bash
6npx shadcn@latest add button
7```
8 
9```tsx
10import { Button } from "@/components/ui/button"
11import { Loader2 } from "lucide-react"
12 
13// Variants: default | destructive | outline | secondary | ghost | link
14// Sizes: default | sm | lg | icon
15<Button variant="default">Default</Button>
16<Button variant="destructive">Delete</Button>
17<Button variant="outline">Outline</Button>
18<Button size="sm">Small</Button>
19<Button size="icon"><Icon className="h-4 w-4" /></Button>
20 
21// Loading state
22<Button disabled>
23  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
24  Please wait
25</Button>
26```
27 
28## Input & Label
29 
30```bash
31npx shadcn@latest add input label
32```
33 
34```tsx
35import { Input } from "@/components/ui/input"
36import { Label } from "@/components/ui/label"
37 
38// Basic input
39<Input type="email" placeholder="Email" />
40 
41// Input with label
42<div className="grid w-full max-w-sm items-center gap-1.5">
43  <Label htmlFor="email">Email</Label>
44  <Input type="email" id="email" placeholder="Email" />
45</div>
46 
47// Input with button
48<div className="flex w-full max-w-sm items-center gap-2">
49  <Input type="email" placeholder="Email" />
50  <Button type="submit" variant="outline">Subscribe</Button>
51</div>
52```
53 
54## Card
55 
56```bash
57npx shadcn@latest add card
58```
59 
60```tsx
61import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
62 
63<Card>
64  <CardHeader>
65    <CardTitle>Card Title</CardTitle>
66    <CardDescription>Card Description</CardDescription>
67  </CardHeader>
68  <CardContent>
69    <p>Card Content</p>
70  </CardContent>
71  <CardFooter className="flex justify-between">
72    <Button variant="outline">Cancel</Button>
73    <Button>Deploy</Button>
74  </CardFooter>
75</Card>
76```
77 
78## Dialog (Modal)
79 
80```bash
81npx shadcn@latest add dialog
82```
83 
84```tsx
85import {
86  Dialog, DialogContent, DialogDescription, DialogFooter,
87  DialogHeader, DialogTitle, DialogTrigger,
88} from "@/components/ui/dialog"
89 
90<Dialog>
91  <DialogTrigger asChild>
92    <Button variant="outline">Open Dialog</Button>
93  </DialogTrigger>
94  <DialogContent className="sm:max-w-[425px]">
95    <DialogHeader>
96      <DialogTitle>Edit profile</DialogTitle>
97      <DialogDescription>Make changes to your profile here.</DialogDescription>
98    </DialogHeader>
99    <div className="grid gap-4 py-4">
100      <div className="grid grid-cols-4 items-center gap-4">
101        <Label htmlFor="name" className="text-right">Name</Label>
102        <Input id="name" className="col-span-3" />
103      </div>
104    </div>
105    <DialogFooter>
106      <Button type="submit">Save changes</Button>
107    </DialogFooter>
108  </DialogContent>
109</Dialog>
110```
111 
112## Sheet (Slide-over)
113 
114```bash
115npx shadcn@latest add sheet
116```
117 
118```tsx
119import {
120  Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger,
121} from "@/components/ui/sheet"
122 
123// sides: top | right | bottom | left (default: right)
124<Sheet>
125  <SheetTrigger asChild>
126    <Button variant="outline">Open Sheet</Button>
127  </SheetTrigger>
128  <SheetContent side="right">
129    <SheetHeader>
130      <SheetTitle>Settings</SheetTitle>
131      <SheetDescription>Configure your application settings.</SheetDescription>
132    </SheetHeader>
133    {/* Sheet content */}
134  </SheetContent>
135</Sheet>
136```
137 
138## Select (Dropdown)
139 
140```bash
141npx shadcn@latest add select
142```
143 
144```tsx
145import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
146 
147<Select>
148  <SelectTrigger className="w-[180px]">
149    <SelectValue placeholder="Select a fruit" />
150  </SelectTrigger>
151  <SelectContent>
152    <SelectItem value="apple">Apple</SelectItem>
153    <SelectItem value="banana">Banana</SelectItem>
154    <SelectItem value="orange">Orange</SelectItem>
155  </SelectContent>
156</Select>
157```
158 
159## Toast Notifications
160 
161```bash
162npx shadcn@latest add toast
163```
164 
165Add `<Toaster />` to root layout:
166 
167```tsx
168// app/layout.tsx
169import { Toaster } from "@/components/ui/toaster"
170 
171export default function RootLayout({ children }) {
172  return (
173    <html lang="en">
174      <body>
175        {children}
176        <Toaster />
177      </body>
178    </html>
179  )
180}
181```
182 
183Using toast:
184 
185```tsx
186import { useToast } from "@/components/ui/use-toast"
187 
188export function ToastDemo() {
189  const { toast } = useToast()
190 
191  return (
192    <Button onClick={() => toast({ title: "Success", description: "Changes saved." })}>
193      Show Toast
194    </Button>
195  )
196}
197 
198// Variants
199toast({ title: "Success", description: "Changes have been saved." })
200toast({ variant: "destructive", title: "Error", description: "Something went wrong." })
201toast({ title: "Undo?", action: <ToastAction altText="Undo">Undo</ToastAction> })
202```
203 
204## Table
205 
206```bash
207npx shadcn@latest add table
208```
209 
210```tsx
211import {
212  Table, TableBody, TableCaption, TableCell,
213  TableHead, TableHeader, TableRow,
214} from "@/components/ui/table"
215 
216const invoices = [
217  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
218  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
219]
220 
221<Table>
222  <TableCaption>A list of your recent invoices.</TableCaption>
223  <TableHeader>
224    <TableRow>
225      <TableHead>Invoice</TableHead>
226      <TableHead>Status</TableHead>
227      <TableHead>Method</TableHead>
228      <TableHead className="text-right">Amount</TableHead>
229    </TableRow>
230  </TableHeader>
231  <TableBody>
232    {invoices.map((invoice) => (
233      <TableRow key={invoice.invoice}>
234        <TableCell className="font-medium">{invoice.invoice}</TableCell>
235        <TableCell>{invoice.status}</TableCell>
236        <TableCell>{invoice.method}</TableCell>
237        <TableCell className="text-right">{invoice.amount}</TableCell>
238      </TableRow>
239    ))}
240  </TableBody>
241</Table>
242```
243 
244## Menubar & Navigation
245 
246```bash
247npx shadcn@latest add menubar
248```
249 
250```tsx
251import {
252  Menubar, MenubarContent, MenubarItem, MenubarMenu,
253  MenubarSeparator, MenubarShortcut, MenubarSub,
254  MenubarSubContent, MenubarSubTrigger, MenubarTrigger,
255} from "@/components/ui/menubar"
256 
257<Menubar>
258  <MenubarMenu>
259    <MenubarTrigger>File</MenubarTrigger>
260    <MenubarContent>
261      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
262      <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
263      <MenubarSeparator />
264      <MenubarItem>Print</MenubarItem>
265    </MenubarContent>
266  </MenubarMenu>
267  <MenubarMenu>
268    <MenubarTrigger>Edit</MenubarTrigger>
269    <MenubarContent>
270      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
271      <MenubarSeparator />
272      <MenubarSub>
273        <MenubarSubTrigger>Find</MenubarSubTrigger>
274        <MenubarSubContent>
275          <MenubarItem>Search the web</MenubarItem>
276          <MenubarItem>Find...</MenubarItem>
277        </MenubarSubContent>
278      </MenubarSub>
279    </MenubarContent>
280  </MenubarMenu>
281</Menubar>
282```
283