Modal

Compound modal dialog. Renders into a portal, closes on overlay click or Escape key. Supports controlled and uncontrolled state.

Preview

Open Sandbox

Anatomy


import { Modal } from '@wire-ui/react'
 
<Modal.Root open={open} onOpenChange={setOpen}>
  <Modal.Portal>
    <Modal.Overlay>
      <Modal.Content>
        <h2>Dialog title</h2>
        <p>Dialog body</p>
        <Modal.Close>Close</Modal.Close>
      </Modal.Content>
    </Modal.Overlay>
  </Modal.Portal>
</Modal.Root>

Root props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial state for uncontrolled use
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes

Data attributes

data-state is set on both Modal.Overlay and Modal.Content:

Value	When
`"open"`	Modal is open
`"closed"`	Modal is closed

Behaviour

Portal — content is rendered outside the document tree via createPortal
Escape key — closes the modal
Overlay click — closes the modal
Modal.Content — renders with role="dialog" and aria-modal="true"
Modal.Close — any button inside that calls onOpenChange(false) on click

Animation

Use data-state with CSS transitions:


[data-state="open"]   { animation: fadeIn 150ms ease; }
[data-state="closed"] { animation: fadeOut 150ms ease; }