Sheet

Use a sheet when the page context matters but the task needs more room than a dialog. Sheets are anchored to a viewport edge and work well for filters, settings and detail panels.

Open settingsJob updates: on

Show codeCopy

Import

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

Anatomy

SheetContent accepts side="left", "right", "top" or "bottom". Add a SheetHeader with a title and description, then keep the primary action in SheetFooter.

<Sheet>
  <SheetTrigger asChild><Button variant="outline">Settings</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>...</SheetHeader>
    <SheetFooter>...</SheetFooter>
  </SheetContent>
</Sheet>

Behaviour

• The sheet closes with Escape, the overlay, the close button or an explicit footer action.
• Use a controlled sheet when changes need a save or discard boundary.
• Keep the panel content scrollable and avoid nesting another overlay unless the interaction truly needs a second decision.

Accessibility

Always provide SheetTitle; pair it with SheetDescription when the title does not fully explain the task. Keep the close control reachable and preserve the primitive's focus trap and Escape handling.

Best practices

• Use the right side for supporting details and settings in left-to-right layouts.
• Keep the page state visible enough to preserve context.
• Use a full page when the task has its own navigation hierarchy.