Sheet
A dialog that slides in from the side of the screen.
Installation
npx shadcn@latest add @blank/sheetUsage
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Description</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Examples
Sides
With a form
SheetFooter pins itself to the bottom of the panel, so actions stay in reach however long the form gets.
API Reference
Sheet
Every Radix Dialog.Root prop: open, defaultOpen, onOpenChange, modal.
SheetContent
Every Radix Dialog.Content prop, plus:
| Prop | Type | Default |
|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" |
showCloseButton | boolean | true |