Skip to content
Nexus Application Design nadesign

Sheet

<Sheet> is a drawer — slides in from top, right, bottom, or left. Use for filters, peek-detail views, mobile navigation. The page beneath dims but the user keeps spatial context.

import from "@na/ui/components/sheet" ▶ Open in Storybook packages/ui/src/components/sheet.tsx

When to use

  • Filter panels next to a list.
  • Peek-detail (preview + actions) without a full route change.
  • Mobile primary navigation that hides on desktop.

Don’t use Sheet for: confirmations (AlertDialog), in-page edits (Dialog when centered modal is right), or persistent layout regions (use RightPanel for split views).

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open filters</Button>
  </SheetTrigger>
  <SheetContent side="right" className="w-80">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>Drill down the list.</SheetDescription>
    </SheetHeader>
    {/* body */}
    <SheetFooter>
      <SheetClose asChild><Button variant="outline">Close</Button></SheetClose>
      <Button>Apply</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

API

SheetContent accepts side="top" | "right" | "bottom" | "left" (default "right"). The width / height should be set via className (w-80, h-96).

Other primitives (Sheet root, SheetTrigger, SheetClose, SheetHeader, SheetTitle, SheetDescription, SheetFooter) mirror Radix Dialog semantics.

Design guidelines

✓ Do

  • Use side="right" for filter / detail peeks (Western-language reading direction).
  • Cap the sheet width — w-80 to w-[28rem] is the comfort range. Avoid full-width on desktop.
  • Pair filter sheets with explicit Apply / Close. Auto-apply-on-change works only when the result is instant.

✗ Don't

  • Use Sheet for destructive confirmation. The motion is decorative; AlertDialog matches the gravity.
  • Stack sheets. If the next state is sheet-worthy, the previous state should not be a sheet.
  • Treat Sheet as permanent split layout. RightPanel is the persistent, resizable cousin.

Accessibility

  • Composes Radix Dialog under the hood — focus trapped, Esc closes, returns focus to the trigger.
  • SheetTitle is required for screen-reader announcement.

▶ Open Sheet stories in Storybook