layout contract
Modal
Centred, blocking surface for short flows. Use Dialog for confirmations, Sheet for browse/edit.
Variants
- default
- Centred card + backdrop
- fullscreen
- Edge-to-edge — for media viewers, complex editors
Sizes
- sm
- 420pt
- md
- 560pt
- lg
- 720pt
- xl
- 960pt
Example
<Modal open={open} onOpenChange={setOpen} size="md">...</Modal>Usage rule
role="dialog" + aria-modal="true".
The full Modal contract has 4 more rules, plus the do-not patterns. Get the full recipe.