Sheet

Edge-anchored modal drawer built on Radix Dialog. Reach for a Sheet over a Dialog when the task is a side errand to the main view — editing a record, filters, a detail panel — and you want the drawer to slide in without fully covering the page; use a centered Dialog for short, focused confirmations and a Sidebar for persistent (non-modal) navigation. The side prop picks the dock edge: right (default) for forms and detail panels, left for nav/filter trays, and top/bottom for shallow banners or mobile action sheets. Set density="compact" to tighten padding and header gaps in dense or nested contexts; the default comfortable suits standalone drawers.

Default (right)

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile here.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <Button variant="primary">Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Side variants

<SheetContent side="left">…</SheetContent>
<SheetContent side="top">…</SheetContent>
<SheetContent side="bottom">…</SheetContent>

Props

Component	Notable props
Sheet	open, defaultOpen, onOpenChange, modal
SheetTrigger	asChild
SheetContent	side ("top" \| "right" \| "bottom" \| "left", default "right"); density ("comfortable" default \| "compact") cascades shell padding (20/12) and SheetHeader gap (8/4) to all slots.
SheetClose	asChild — renders a close affordance

Source

packages/react/src/components/sheet.tsx · Figma node 2819:30307