A focus-trapped modal with Escape, backdrop dismissal, focus restoration, sizes, and footer composition.
SmallMediumLargeKeyboard
<Modal open title="Confirm change" onclose={close}>...</Modal>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Modal } from '@chanrg/4ui';<Modal open title="Confirm change" onclose={close}>...</Modal>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Dialog visibility. |
size | sm | md | lg | md | Maximum width. |
onclose | () => void | — | Close request callback. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Traps focus, restores the prior target, and closes with Escape.