Modal

Dialog overlay for focused user interactions and important content.

Source

View source code

Issues

Report an issue

Package

@rootui/modal

Reference

React Aria docs

Preview

isKeyboardDismissDisabled

1<Modal>
2  <Modal.Trigger>
3    Click me to open modal
4  </Modal.Trigger>
5  <Modal.Content>
6    Hello, I'm the content!
7  </Modal.Content>
8</Modal>

Anatomy

1<Modal>
2  <Modal.Trigger></Modal.Trigger>
3  <Modal.Content></Modal.Content>
4</Modal>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/modal

Usage

1import { Modal } from "@rootui/modal";
2
3export default function Page() {
4  return (
5    <Modal>
6      <Modal.Trigger>
7        This is the trigger
8      </Modal.Trigger>
9      <Modal.Content>
10        This is the content
11      </Modal.Content>
12    </Modal>
13  )
14}

API Reference

See the React Aria documentation for more information.

Prop	Type	Default
`isOpen`	`Boolean`	`-`
Whether the modal is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the modal is open by default (uncontrolled).
`onOpenChange`	`(isOpen: boolean) => void`	`-`
Handler that is called when the overlay's open state changes.

Prop	Type	Default
`children`	`ReactNode`	`-`

Prop	Type	Default
`isDismissable`	`Boolean`	`false`
Whether to close the modal when the user interacts outside it.
`isKeyboardDismissDisabled`	`Boolean`	`false`
Whether pressing the escape key to close the modal 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.

Attribute	Description
`data-entering`	Whether the modal is currently entering. Use this to apply animations.
`data-exiting`	Whether the modal is currently exiting. Use this to apply animations.