Browse the docs

Sheet

Panel that slides in from an edge — settings drawers, mobile filters, detail views. Built on the composable dialog primitive, so the focus trap, Escape handling, inert background, and top-layer rendering all come from the native <dialog> element.

This component needs the dialog primitive — two ways to get it:

Copy: fetch /r/primitives/dialog.txt and save it as primitives/dialog.js.
Install: npm install @presetui/ui — the primitives are bundled, no second package — then use the Source · npm tab below, whose import already points at @presetui/ui/primitives/dialog.

Props

Prop	Values	Default	Description
`open`	boolean	required	Keep it in your state.
`onClose`	function	required	Fires once per dismissal — button, Escape, or backdrop.
`title`	node	—	Accessible name for the panel.
`side`	`"right"`, `"left"`, `"bottom"`	`"right"`	Which edge it enters from.
`dismissable`	boolean	`true`	Set `false` to block Escape and backdrop dismissal.
`className`	string	`""`	Appended to the panel.

Notes

The centered Dialog remains the one-file, no-primitive option for confirmations. Sheet exists for edge-anchored layouts and shares its underlying behavior with anything else you build on the dialog primitive: DialogRoot, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose.