sheet

Wider drawer for full-page experiences. Built on <dialog>.

status: stable js: trigger support: dialog

Preview

This overlay stays hidden until triggered — open it in the live demo →

<dialog class="sheet" data-side="right" id="X">…</dialog>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/sheet.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add sheet

Open via showModal(); native <dialog>; data-side edge; full-page backdrop

.sheet .sheet-header .sheet-title-block .sheet-title .sheet-description .sheet-body .sheet-footer

base/tokens