Sheet

Side-anchored drawer that slides in from any edge. Use for filter panels, navigation drawers, and detail views that complement the main page.

When to use Sheet vs Drawer vs Dialog

Sheet slides in from a side (left/right/top/bottom). Drawer is a vaul-vue bottom sheet tuned for mobile. Dialog is a centered modal. For modals that should adapt across devices, use DialogResponsive.

Anatomy

Import all parts and piece them together.

vue

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

<template>
  <Sheet>
    <SheetTrigger />
    <SheetContent>
      <SheetHeader>
        <SheetTitle />
        <SheetDescription />
      </SheetHeader>
      <SheetFooter />
      <SheetClose />
    </SheetContent>
  </Sheet>
</template>

Default

Right-side sheet with header and content.

Sides

Set side to top, right, bottom, or left.

With form

Collect input with labelled fields and confirm in the footer.

API Reference

Props, events, and slots for each sub-component.

Sheet

Props

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

Events

Event	Description
update:open	Fires when the sheet opens or closes. Enables v-model:open.

SheetTrigger / SheetClose

Props

Prop	Type	Default	Description
asChild	boolean	false	Render the child slot without the default button wrapper.

SheetContent

Props

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	Edge to slide in from.

Events

Event	Description
escape-key-down	Fires when Escape is pressed.
pointer-down-outside	Fires on a pointer press outside the sheet.

SheetHeader / SheetFooter / SheetTitle / SheetDescription

Props

Prop	Type	Default	Description
class	string	—	Layout and typography wrappers for the sheet content.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`Space`	When focus is on the trigger, opens the sheet.
`Enter`	When focus is on the trigger, opens the sheet.
`Tab`	Moves focus to the next focusable element inside the sheet.
`Shift`+`Tab`	Moves focus to the previous focusable element.
`Esc`	Closes the sheet and returns focus to the trigger.

A side-anchored Dialog: focus is trapped within the content while open and restored on close.
Content is labelled by SheetTitle and described by SheetDescription via aria-labelledby / aria-describedby.

Separator Sidebar