Overlays/Modal
Modal
An accessible dialog overlay that traps focus and renders above all other content. Use it for confirmations, forms, or any content that demands the user's attention before continuing.
import { Modal, ModalHeader, ModalBody, ModalFooter } from "@animui/ui"Basic usage
Control visibility with the open prop and dismiss with onClose.
Sizes
Four built-in sizes adapt to the amount of content inside the dialog.
Form in modal
Embed a form directly inside ModalBody. The modal handles focus trapping so the user stays in the form.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls whether the modal is visible. |
onClose | () => void | — | Callback fired when the backdrop or close button is clicked, or Escape is pressed. |
size | "sm" | "md" | "lg" | "full" | "md" | Controls the maximum width of the modal dialog. |
children | ReactNode | — | Content — typically ModalHeader, ModalBody, and ModalFooter. |
closeOnBackdrop | boolean | true | Whether clicking the backdrop dismisses the modal. |
className | string | — | Extra Tailwind classes applied to the modal panel. |
Accessibility
- ✓Renders a native
<dialog>element withrole="dialog"andaria-modal="true". - ✓Focus is trapped inside the dialog while it is open and returned to the trigger on close.
- ✓Escape dismisses the modal.
- ✓Background scroll is locked while the modal is open.