Sheet

A side panel with coherent structure and spacing, from any edge.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add sheet

What add sheet installs alongside the component. The CLI skips any you already have in a compatible version.

2 examples · 1 component

A form in a right-side sheet; the footer stays at the bottom.

side picks the edge and the dismiss swipe.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`side` Edge it enters from; the matching swipe dismisses it. Physical, so it does not flip in RTL.	`"right" \| "left" \| "top" \| "bottom"`	`"right"`
`Sheet` Root; open, defaultOpen, onOpenChange and modal.	`—`	—
`SheetTrigger / SheetClose` Open and close; use render to reuse Button.	`button`	—
`SheetContent` Portaled panel (3/4 width up to 24rem on the sides); showClose (true) adds the corner button.	`div`	—
`SheetHeader / SheetFooter` Title block and actions; the footer sticks to the bottom.	`div`	—
`SheetTitle / SheetDescription` Label and describe the dialog.	`h2 / p`	—

The states that apply to this component and their visual treatment.

State	Treatment
Closed	Only the trigger.
Open	Slides in from side over a dimmed backdrop.
Swiping	Follows the gesture toward its edge.
Dismissed	Slides out; focus returns to the trigger.

A modal dialog built on Drawer: focus moves in, is trapped and returns to the trigger; the title labels it.

Escape, the backdrop and the close button dismiss it; the swipe is an extra, never the only way.

Use Dialog for short confirmations and Sheet for longer tasks that keep the page context visible.

The slide stops with reduced motion.