Zostel
Overlays Sheet

Sheet

A panel from the side: filters, a menu, a cart.

Preview

Usage

tsx
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetClose, Button } from "zostel-ui";

<Sheet>
  <SheetTrigger asChild><Button variant="outline">Filters</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>Narrow it down.</SheetDescription>
    </SheetHeader>
    …
    <SheetClose asChild><Button>Show places</Button></SheetClose>
  </SheetContent>
</Sheet>

Sheet

open / defaultOpen
Type: boolean
Default: —

Controlled / uncontrolled.

onOpenChange
Type: (open: boolean) => void
Default: —

Called when it opens or closes.

SheetContent

side
Type: "top" | "right" | "bottom" | "left"
Default: "right"

The edge it comes from; bottom is the phone's sheet (rounded on top, clear of the home bar). The dialog's veil, panel and close (see Dialog).

close
Type: boolean
Default: true

The built-in close control, top right; false when the sheet draws its own.

container
Type: HTMLElement | null
Default: —

Where it mounts (document.body by default).

className
Type: string
Default: —

More classes, merged with the component’s own (tailwind-merge).

Accessibility

Esc closes it, focus returns to the trigger, and the page behind is locked while it is open (Radix).