A modal is an overlay element which blocks interaction with elements outside it.
Note: Modal only provides the overlay itself. It should be combined with Dialog to create fully accessible modal dialogs. See dialog component instead.
basic.tsx
Installation
npm
pnpm
yarn
bun
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | - | Whether the overlay is open by default (controlled). |
defaultOpen | boolean | - | Whether the overlay is open by default (uncontrolled). |
isDismissable | boolean | false | Whether to close the modal when the user interacts outside it. |
UNSTABLE_portalContainer | Element | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. |
isKeyboardDismissDisabled | boolean | false | Whether pressing the escape key to close the dialog should be disabled. |
shouldCloseOnInteractOutside | (element: Element) => boolean | - | When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref. |
children | ReactNode | (opts: ModalRenderProps) => ReactNode | - | The children of the component. A function may be provided to alter the children based on component state. |
className | string | (values: ModalRenderProps & {defaultClassName: string | undefined}) => string | - | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | (values: ModalRenderProps & {defaultStyle: CSSProperties}) => CSSProperties | undefined | - | The inline style for the element. A function may be provided to compute the style based on component state. |
| Event | Type | Description |
|---|---|---|
onOpenChange | (isOpen: boolean) => void | Handler that is called when the overlay's open state changes. |
Last updated on 9/15/2025
On this page