overlays / stable

Sheet

Side panel that springs in from an edge; modal by default, non-modal for the peek panel.

LIVE PREVIEW

Loading preview…

When to use

Record details or edits next to the list the user came from.
Create / edit forms (the default home for forms), long forms, filters and settings that need more room than a dialog.

Consider an alternative

Short blocking decisions or confirmations — use Dialog / AlertDialog.
Permanent navigation — use the sidebar.

Import

import { Sheet } from '@revido-llc/kit';

Keyboard interaction

Escape — close
Tab — cycle focus (trapped when modal)

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


aria-label	string	—	Accessible name when the sheet has no `SheetTitle`.
children	ReactNode \| ((opts: DialogRenderProps) => ReactNode)	—
className	string	—
defaultOpen	boolean	—
isDismissable	boolean	—	Close on a click outside (backdrop). Default true when modal, false when not.
isKeyboardDismissDisabled	boolean	false	Disable closing with Escape.
isOpen	boolean	—	Controlled open state (only when not inside a `DialogTrigger`).
modal	boolean	true	`true` (default): blocks the page with a backdrop and traps focus. `false`: a non-modal panel — the page stays usable, focus is not trapped, Escape inside the panel still closes it. Prefer `Peek` for record peeks (resize + cookie width + Enter expand).
onOpenChange	((isOpen: boolean) => void)	—
side	"bottom" \| "left" \| "right"	"right"	Edge it slides in from. Default `right`.
size	"lg" \| "md" \| "sm" \| "xl"	"md"	Width for left/right sheets, from the `--drawer-width-*` tokens. Default `md`.

Related exports

SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose

Examples

Form drawer

Create/edit forms open in a right-side Sheet, not a Dialog: header, scrolling body, footer with cancel on the left and one primary action on the right.

<DialogTrigger>
  <Button>New client</Button>
  <Sheet>
    <SheetHeader>
      <SheetTitle>New client</SheetTitle>
      <SheetDescription>You can add contacts after creating it.</SheetDescription>
    </SheetHeader>
    <SheetBody><TextField label="Name" isRequired /></SheetBody>
    <SheetFooter>
      <SheetClose />
      <Button type="submit">Create client</Button>
    </SheetFooter>
  </Sheet>
</DialogTrigger>

Sides

Right is the default; bottom suits mobile-first flows.

<DialogTrigger>
  <Button variant="outline">Filters</Button>
  <Sheet side="left" size="sm">…</Sheet>
</DialogTrigger>

Edit record

<DialogTrigger>
  <Button>Edit deal</Button>
  <Sheet size="lg">
    <SheetHeader>
      <SheetTitle>Website redesign</SheetTitle>
      <SheetDescription>Deal · Acme Corp</SheetDescription>
    </SheetHeader>
    <SheetBody>…</SheetBody>
    <SheetFooter>
      <SheetClose />
      <Button>Save changes</Button>
    </SheetFooter>
  </Sheet>
</DialogTrigger>

Non-modal (peek)

modal={false}: no backdrop, the page stays usable; Escape inside closes it.

<Sheet modal={false} isOpen={open} onOpenChange={setOpen} aria-label="Peek">…</Sheet>