Sheet

Usage

import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@kanzo-tech/ui";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open member</Button>
  </SheetTrigger>
  <SheetContent placement="right">
    <SheetHeader title="Ravenna Sarkis" description="Warden · The Amber Hall" />
    <SheetBody>…</SheetBody>
  </SheetContent>
</Sheet>

Sheet is Dialog's machine with an edge-docked positioner, so it inherits the same modal behaviour, lazyMount and close semantics. Reach for it over Dialog when the panel is a place to work rather than a question to answer — the page stays visible alongside it.

A sheet is Dialog's machine docked to an edge — three surfaces, one machine.

Anatomy

Sheet
├── SheetTrigger
└── SheetContent          (portal + overlay + positioner)
    ├── SheetHeader
    │   ├── DialogTitle          (or the header's `title` shorthand)
    │   └── DialogDescription    (or `description`)
    ├── SheetBody
    ├── SheetFooter
    │   └── SheetClose
    └── SheetClose        (the built-in X)

Placement

left and right sheets are capped at max-w-md and always leave a strip of the page visible; top and bottom size to their content.

SheetContent renders the floating layer for you, and both halves are exported for when it has to be rearranged. SheetPositioner is the one with the placement on it — it takes placement and a variant, and it is what puts a sheet against an edge rather than in the middle. SheetOverlay is DialogOverlay under the sheet's own data-slot, which is the same sentence as "a Sheet is a Dialog with edge placement" written in the surface.

Variants

API Reference

SheetContent

inset insets the panel from the viewport and rounds its corners from the sm breakpoint up; below that it stays flush, because a floating card on a phone wastes the width.

Sheet / SheetHeader / SheetBody

Same props as Dialog, DialogHeader and DialogBody — including the header's title and description shorthands and the body's scrollFade.

There is no SheetTitle or SheetDescription: the header's shorthands render DialogTitle and DialogDescription, and those are what to reach for when a header needs more than two strings. A sheet is Dialog's machine, so it is Dialog's title too.