Modal Dialog

The simple, native-<dialog> based modal system. Built on showModal(), so it gets top-layer rendering (no z-index management), focus trapping, Escape-to-close and a backdrop for free. Only one modal is open at a time — opening another replaces it. It closes via the close button, a backdrop click, Escape, or the browser/hardware back button, and renders as a bottom sheet on mobile and a centered card on desktop.

Open modals imperatively with the useModalDialog().openModal(node, options) hook. Options: title, variant ('auto' | 'center' | 'sheet') and dismissable. Prefer reading live data with hooks inside the modal content rather than passing snapshot props, since the content node is captured when openModal is called.

// 1. Mount once at the app root (already done in the consumer app):
<ModalProvider>
  <App />
</ModalProvider>

// 2. Open a modal from anywhere — no enum, config or wrapper needed:
const { openModal, closeModal } = useModalDialog()

openModal(<MyContent {...props} />, { title: 'Heading' })

Examples

<ModalDialogDemo />