build69
Sign inGet API key
build69  /  Components  /  Overlays  /  Sheet

Sheet

v1.0.8Updated 27 Aug 2026

Side panel that slides in from an edge (Radix). Use for filters, settings, or detail editors. Adds header / body / footer slots, declarative sub-sections, a dismissable backdrop toggle, and a form-friendly footer with a

View source← Back to catalog

Preview

Live · 15 stories
RightOpen ↗
▸Why this is recommendeddrawerpanelsidepaneloverlay+4

Sheet — right.

Recommended for+14
  • ✓Detail editors
  • ✓Filter panels
  • ✓Settings drawers
  • ✓Right-side forms
  • ✓Mobile bottom sheets
  • ✓Multi-step flows
  • ✓Resizable detail-editor panels
  • ✓Master→detail drill-in panes (non-modal)
Tags+6
drawerpanelsidepaneloverlayformresizabledetailright
Features+4
  • Left / right / top / bottom anchored
  • Focus trap (modal presentation)
  • Backdrop dismiss
  • Header / body / footer slots
  • Sub-section blocks with dividers
  • Sticky footer for action row
  • Dismissable backdrop toggle
  • Loading state
  • Resizable width (resizable): drag the inner edge or use the keyboard (Arrow/Home/End) — clamped min/max, controlled (width/onWidthChange) or persisted (persistWidthKey). Left/right sides.
  • Non-modal inset presentation (presentation="inset"): renders inline (no portal, no backdrop, no focus trap) inside a positioned content region, so the app bar/sidebar/rest of the shell stay interactive — a master→detail drill-in
  • i18n: labels prop on the Sheet root overrides the built-in Close/Loading/Resize strings; merged over DEFAULT_SHEET_LABELS
Not recommended for−2
  • ✕Modal confirmations (use Dialog)
  • ✕Tooltips (use Tooltip)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Sheet" })

Usage

import { Sheet } from '@/components/overlays/sheet';

<Sheet open={open} onOpenChange={setOpen} side="right">
  <Sheet.Header>Edit invoice</Sheet.Header>
  <Sheet.Body>…</Sheet.Body>
  <Sheet.Footer><Button>Save</Button></Sheet.Footer>
</Sheet>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
side

Edge to slide from

'left'|'right'|'top'|'bottom'—
presentation

'modal' (default) is the fixed, portalled, focus-trapping takeover. 'inset' is a NON-MODAL inline drawer — no portal, no backdrop, no focus trap, positioned absolutely inside the nearest positioned ancestor, so the rest of the shell stays interactive (a master→detail drill-in). Wrap the content region in a `relative overflow-hidden` container. MCP feedback fb_906b6f53.

'modal' | 'inset'—
resizable

Let the user drag the panel's inner edge to resize its width (left/right sides only). Pointer + keyboard (Arrow/Home/End), clamped to minWidth/maxWidth. MCP feedback fb_642d8d6f.

boolean—
width

Controlled width in px (pair with onWidthChange). Omit for uncontrolled.

number—
defaultWidth

Uncontrolled initial width in px (default 420).

number—
onWidthChange

Called with the clamped width on each resize.

(width: number) => void—
minWidth

Min resize width in px (default 320).

number—
maxWidth

Max resize width in px (default 720).

number—
persistWidthKey

localStorage key to persist the uncontrolled width across sessions.

string—
dismissable

Allow backdrop / Esc dismiss

boolean—
loading

Loading state

boolean—
labels

Override the built-in Close/Loading/Resize strings (i18n). Merged over DEFAULT_SHEET_LABELS; works in compositional and Pro modes and does not trigger Pro mode

Partial<SheetLabels>—

Related

Platform docsAll componentsSource files