Sheet
A panel that slides out from the edge of the screen. A handy replacement for dialogs and popovers.
Installation
npm i @radix-ui/react-dialogUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
export function SheetDemo() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open Sheet</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<label htmlFor="name" className="text-right text-sm font-medium">
Name
</label>
<input
id="name"
className="col-span-3 h-10 rounded-md border border-input bg-background px-3 py-2"
placeholder="Your name"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<label htmlFor="username" className="text-right text-sm font-medium">
Username
</label>
<input
id="username"
className="col-span-3 h-10 rounded-md border border-input bg-background px-3 py-2"
placeholder="@username"
/>
</div>
</div>
<SheetFooter>
<SheetClose asChild>
<Button type="submit">Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
)
}Examples
Sheet Positions
Different Sizes
Props
| Component | Props | Description |
|---|---|---|
| Sheet | DialogPrimitive.DialogProps | The root component for the sheet. |
| SheetTrigger | DialogPrimitive.DialogTriggerProps | The button that triggers the sheet to open. |
| SheetContent | DialogPrimitive.DialogContentProps & VariantProps side?: "top" | "right" | "bottom" | "left" | The component that contains the sheet content. |
| SheetHeader | HTMLDivElement | The header component for the sheet. |
| SheetFooter | HTMLDivElement | The footer component for the sheet. |
| SheetTitle | DialogPrimitive.DialogTitleProps | The title component for the sheet. |
| SheetDescription | DialogPrimitive.DialogDescriptionProps | The description component for the sheet. |
| SheetClose | DialogPrimitive.DialogCloseProps | The button that closes the sheet. |