Components

Sheet

Side drawer that slides in from any edge (top / bottom / left / right). Used for focused sub-flows like filter editing, quick edit, or a properties panel.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Sheet>
  <SheetTrigger asChild>
    <Button>Open sheet</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit rule</SheetTitle>
      <SheetDescription>Adjust the trigger, count window, and outcome.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancel</Button>
      </SheetClose>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

When to use

  • Focused edits without leaving the current page.
  • Filter or configuration panels that need more room than a Popover.

When not to use

  • For critical yes/no confirmations — use Dialog.
  • For transient feedback — use Toast.

Usage

Do
  • Anchor a primary CTA in the footer.
  • Use side='right' for detail editing (matches the reading direction).
Don't
  • Don't stack Sheets.
  • Don't hide the close X — it's the escape hatch.