Dialog
A modal window over the page. Long content scrolls, nested dialogs stack, and on phones it's a sheet you swipe away.
One skill, every component.
Install
The dialog is part of the boilerplate skill, with every other component on this site. Install it in your project's folder; it works in Claude Code, Codex, Cursor and other agents. Already done? Skip ahead. More in the Introduction.
npx skills add frontendsupply/skills --skill boilerplateAsk
Then ask for it in your own words, or run the command. The skill reads your project's style first and writes the component in it. If the project has no dialog yet:
/boilerplate add dialogIf it already has one, the skill rebuilds it on this pattern and keeps its look, its names and every place that uses it working:
/boilerplate refactor dialogEither way it ends by proving that only the look changed: a script checks every behavior class and slot is still there.
The page never moves.
Long content
A dialog taller than the screen grows past it and scrolls inside its own layer, so the page behind stays exactly where it was. It opens at the top, not scrolled down to its last button.
A stack of cards.
Nesting
Put a dialog inside another and they stack like cards. The new one rises into place a step below the top edge of the one behind, which recedes, hides its content and is trimmed to fit, so every level peeks out. The whole stack stays centered on the screen.
One step back to the page.
Closing the whole stack
The last step of a nested flow often finishes the job. Going back through every level would be wrong, so a close button marked closeAll closes them all at once: the stack leaves as one piece.
Every way out can be stopped.
Unsaved changes
Escape, a click on the backdrop, a Cancel button and closeAll all pass through one handler that can say no. Here, leaving with an edit asks first, in a dialog stacked on top; Discard then closes both.
One dialog, many triggers
A list with an action on every row needs one dialog, not one per row. The triggers can sit anywhere on the page and share it; each one hands the dialog what it's about, here the file's name.
- brand-refresh.fig
- q3-roadmap.md
- onboarding-v2.mp4
A sheet you can swipe away.
On phones
Below 768px every dialog on this page becomes a bottom sheet: it slides up from the edge, scrolls inside when it's tall, and closes with a swipe down. Nested sheets stack the same way, and fields stay above the keyboard. A dialog that's open while the window crosses the breakpoint keeps its mode until it closes, so nothing typed is lost. Open this page on a phone to try it.
What lines up.
Alignment
An open dialog at its real size, with the lines its parts share. Hover a line to see what sits on it: one edge the content keeps to, the same on every side, with the title and text starting on it and the actions ending and sitting on it, side by side at one height. The dashed lines are the border, with the plate's second rule 4px inside it; the left one shows the padding. A part a pixel off would show as a line of its own.