Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Demo

Usage

Import the parts you need from the component's folder.

import {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet";

Side

Use the side prop on SheetContent to set which edge the sheet slides in from.

No Close Button

Set showCloseButton to false to hide the default close button.

API Reference

Sheet

Prop	Type	Default	Description
`open`	`boolean`	—	Open state. Supports v-model:open.

Event	Description
`update:open`	Fires when the sheet opens or closes.

SheetContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Edge the sheet slides in from.
`showCloseButton`	`boolean`	`true`	Show the ✕ button in the top-right corner.

SheetTrigger / SheetClose

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Esc`	Closes the sheet.
`Tab`	Focus is trapped inside the sheet while open.

Responsive Dialog Tooltip