Sheet

uistable

Sheet — extracted 1:1 from WEM-App.

npx shadcn add @krawma/sheet

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/button, @krawma/utils

Preview

States

openclosed

Keyboard

EscapeTab

Depends on

buttonutils

Purpose

A panel that slides in from an edge of the screen — for secondary navigation, filters, or detail views, and especially the mobile off-canvas pattern (e.g. a sidebar collapsing below md). For centered modals use dialog.

Anatomy

Sheet › SheetTrigger › SheetContent (side="top|right|bottom|left") with SheetHeader [SheetTitle, SheetDescription], body, SheetFooter, SheetClose.

Style

No variants — token-backed panel; side picks the edge. Width/height via className.

Behavior & functionality

Modal like dialog: overlay + focus trap. Controlled or uncontrolled; closes on overlay click, SheetClose, and Escape.

Accessibility

SheetTitle is required as the accessible name (visually-hidden if needed). Focus trapped while open (Tab cycles), returns to trigger on close; Escape closes.

Do / Don't

✅ Use for the responsive off-canvas nav (see sidebar) and edge panels.
❌ Don't use for a small confirmation — that's dialog/alert-dialog.