Sheet

Side drawer built on Radix Dialog. Docks to any of the four edges.

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