A side or block-edge dialog panel with optional safe-area spacing. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
sheet,sheet-motion,sheet--safe-area,sheet--block-start,sheet--inline-end,sheet--block-end,sheet--inline-start
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<dialog class="sheet sheet--inline-end" aria-labelledby="filters-title">
<h2 id="filters-title">Filters</h2>
<form method="dialog"><button type="submit">Close</button></form>
</dialog>Variants and composition
Choose one edge: sheet–block-start, –inline-end, –block-end, or –inline-start. sheet–safe-area adds device-safe padding; sheet-motion can be used independently on another dialog.
sheet already includes sheet-motion. The standalone motion class only
transitions [open]; it does not add sheet layout or make closed content
inert. sheet--safe-area adds four physical safe-area paddings, each at
least 2rem, without changing the selected logical edge.
When reusing modal-footer inside a sheet, clear its sticky inset, negative
margin, and block-end padding at both base and sm if the footer should be
static. Modal footer offsets match modal padding, not arbitrary sheet padding.
Behavior and accessibility
A sheet is geometry for a dialog edge, not dialog behavior. Use a native dialog or implement focus, Escape, inertness, and backdrop handling; sheet-motion only styles an open-state transition.
The native dialog opens through showModal() or show(), according to the
required interaction. Setting or removing hidden is not an opening API;
hidden stops its animation immediately. Check logical edge placement in
RTL and focus visibility while the sheet scrolls.
Reference
See the interactive Storybook specimen. Continue to Site or return to the Official preset overview.