Loading...
Loading...
> Extends the Dialog component to display content that slides in from the edge of the screen.
1import {2 Sheet,3 SheetContent,4 SheetDescription,5 SheetHeader,6 SheetTitle,7 SheetTrigger,8 SheetFooter,9} from "@/components/ui/sheet"
1<Sheet>2 <SheetTrigger asChild>3 <Button variant="outline">> OPEN SHEET</Button>4 </SheetTrigger>5 <SheetContent>6 <SheetHeader>7 <SheetTitle>Edit profile</SheetTitle>8 <SheetDescription>9 Make changes to your profile here.10 </SheetDescription>11 </SheetHeader>12 </SheetContent>13</Sheet>
1<Sheet>2 <SheetTrigger asChild>3 <Button>> FROM RIGHT</Button>4 </SheetTrigger>5 <SheetContent side="right">6 <SheetHeader>7 <SheetTitle>Right Side Sheet</SheetTitle>8 </SheetHeader>9 </SheetContent>10</Sheet>
1<Sheet>2 <SheetTrigger asChild>3 <Button variant="secondary">> FROM LEFT</Button>4 </SheetTrigger>5 <SheetContent side="left">6 <SheetHeader>7 <SheetTitle>Left Side Sheet</SheetTitle>8 </SheetHeader>9 </SheetContent>10</Sheet>
1<Sheet>2 <SheetTrigger asChild>3 <Button variant="outline">> FROM TOP</Button>4 </SheetTrigger>5 <SheetContent side="top">6 <SheetHeader>7 <SheetTitle>Top Side Sheet</SheetTitle>8 </SheetHeader>9 </SheetContent>10</Sheet>
1<Sheet>2 <SheetTrigger asChild>3 <Button variant="ghost">> FROM BOTTOM</Button>4 </SheetTrigger>5 <SheetContent side="bottom">6 <SheetHeader>7 <SheetTitle>Bottom Side Sheet</SheetTitle>8 </SheetHeader>9 </SheetContent>10</Sheet>
1<Sheet>2 <SheetTrigger asChild>3 <Button>> EDIT SETTINGS</Button>4 </SheetTrigger>5 <SheetContent>6 <SheetHeader>7 <SheetTitle>Edit settings</SheetTitle>8 <SheetDescription>9 Update your account settings.10 </SheetDescription>11 </SheetHeader>12 <div className="grid gap-4 py-4">13 <div className="grid grid-cols-4 items-center gap-4">14 <Label htmlFor="email" className="text-right">15 Email16 </Label>17 <Input id="email" className="col-span-3" />18 </div>19 </div>20 <SheetFooter>21 <Button type="submit">> SAVE CHANGES</Button>22 </SheetFooter>23 </SheetContent>24</Sheet>
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Control the open state of the sheet. |
| onOpenChange | (open: boolean) => void | undefined | Event handler called when the open state changes. |
| defaultOpen | boolean | false | The initial open state in uncontrolled mode. |
| side | "top" | "right" | "bottom" | "left" | "right" | The side of the screen from which the sheet slides in. |
✓ Use Sheet when:
✗ Don't use when:
Best Practices: