All components
Surfaces
Overlay (Modal & Drawer)
A modal or edge drawer over a frosted scrim, animated with a spring. Escape and scrim-click dismiss it.
Preview
Preview
light
dark
Code
const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open</Button>
<Overlay open={open} onClose={() => setOpen(false)} placement="center" label="Confirm">
…
</Overlay>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled visibility. |
onClose | () => void | — | Dismiss handler. |
placement | "right" | "center" | "right" | Drawer or modal. |
label | string | — | Header eyebrow + close button. |
Usage
Do
- Use center for confirmations, right for detail inspectors.
Don't
- Stack multiple overlays at once.