Modal

A blocking overlay dialog with focus trap, scroll lock, Escape-to-close, backdrop dismissal, and focus return; composed from Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter, and ModalClose.

Installation

npx dafink-ui add modal

Demo

Composition

<Modal>
<ModalClose />
<ModalHeader>
<ModalTitle />
</ModalHeader>
<ModalContent />
<ModalFooter />
</Modal>

Props

NameTypeDefaultDescription
openboolean-Controls whether the modal is rendered and visible (controlled).
onOpenChange(open: boolean) => void-Called with false when the user dismisses via Escape, backdrop click, or ModalClose.
classNamestring""Additional classes merged onto the dialog panel element.
childrenReactNode-Modal subcomponents (ModalHeader, ModalTitle, ModalContent, ModalFooter, ModalClose) and arbitrary content.