drawer

Side panel sliding from any edge. Built on <dialog>.

status: stable js: trigger support: dialog

Preview

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

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

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

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

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add drawer

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

.drawer .drawer-header .drawer-title .drawer-description .drawer-body .drawer-footer .drawer-handle

base/tokens