layout contract
Modal
Centred, blocking surface for short flows. Use Dialog for confirmations, Sheet for browse/edit.
Variants
- default
- fullscreen
Sizes
- sm
- md
- lg
- xl
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.