Sheet
Side drawer panel.
Usage
A Sheet is a Dialog anchored to an edge — it is not a
separate primitive. It composes Bits Dialog, so the focus trap, ESC handling, scroll lock and
ARIA all come from there rather than being reimplemented. Title is
required, because Bits points aria-labelledby at it.
Sides
side pins the panel to an edge and spans the perpendicular axis. right is the default because it is the least disruptive on desktop; bottom is usually the right call on mobile, where the thumb is.
Sizes
size applies to whichever axis the panel actually grows along — width
for left/right, height for top/bottom. Every size is capped against the
viewport, so a large sheet still fits on a small screen.
Sheet vs Dialog
Same mechanics, different intent. Use a Dialog for a focused, self-contained task the user finishes and leaves. Use a Sheet for a secondary surface they move through and refer back to — a nav drawer, a filter panel, a detail pane. The edge anchoring is what signals "this sits beside your work" rather than "this interrupts it".
Props
Root, Trigger and Close are re-exported from Bits Dialog unchanged — open is bindable on Root.
Sheet.Content
| Prop | Type | Default |
|---|---|---|
side Which edge the panel slides in from. | 'left' | 'right' | 'top' | 'bottom' | 'right' |
size Panel thickness — width for left/right, height for top/bottom. | 'sm' | 'md' | 'lg' | 'md' |
class Extra classes merged onto the panel. | string | — |
Title, Description and Overlay each take class plus their native attributes.