Navigation and overlays
Sheet
A bottom sheet dialog with a grab handle that slides up from the bottom edge, for share menus and quick actions on touch screens.
Example
<button type="button" commandfor="share-sheet" command="show-modal" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">Share</button><dialog id="share-sheet" class="sheet" closedby="any" aria-labelledby="share-title"><span class="sheet-handle"></span><div class="sheet-header"><h2 id="share-title" class="text-lg font-semibold">Share this board</h2><p class="text-sm text-muted-foreground">Anyone with the link can view.</p></div><div class="sheet-body"><input class="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm" value="https://acme.app/b/7f3k" readonly aria-label="Link"></div><div class="sheet-footer"><button type="button" commandfor="share-sheet" command="close" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">Done</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Copy link</button></div></dialog>Classes
5 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the sheet. On a <dialog> in the example. Sets overflow, background, opacity, transition, fixed position and offsets.CSS |
|
| Part | Part of the sheet. On a <span> in the example. Sets block display, width, height, margin, corner radius and background.CSS |
|
| Part | Part of the sheet. On a <div> in the example. Sets flex display, alignment, gap and padding.CSS |
|
| Part | Part of the sheet. On a <div> in the example. Sets text size and text style.CSS |
|
| Part | Part of the sheet. On a <div> in the example. Sets flex display, gap, padding and alignment.CSS |
Usage
Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Sheet: start from the base class, then add modifiers -->
<button type="button" commandfor="share-sheet" command="show-modal" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">Share</button><dialog id="share-sheet" class="sheet" closedby="any" aria-labelledby="share-title"><span class="sheet-handle"></span><div class="sheet-header"><h2 id="share-title" class="text-lg font-semibold">Share this board</h2><p class="text-sm text-muted-foreground">Anyone with the link can view.</p></div><div class="sheet-body"><input class="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm" value="https://acme.app/b/7f3k" readonly aria-label="Link"></div><div class="sheet-footer"><button type="button" commandfor="share-sheet" command="close" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">Done</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Copy link</button></div></dialog>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Built on the native
dialogelement. Opened withshowModal()(or a command button) it goes to the top layer, makes the rest of the page inert, closes with Escape and returns focus to the button that opened it. - Give every control a visible
labellinked withfor, or anaria-labelwhen the purpose is obvious from context. Link help and error text witharia-describedby; invalid styles use:user-invalid, so they appear only after the user interacts. - Use
buttonfor actions andafor navigation. Icon only buttons need anaria-label; decorative icons carryaria-hidden="true". - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.