Components
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Usage
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@murasakijs/ui";<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>API Reference
Subcomponents
| Component | Description |
|---|---|
Dialog | The root primitive. Accepts open, defaultOpen, onOpenChange, modal. |
DialogTrigger | The element that opens the dialog. Supports asChild to render a custom trigger (e.g. Button). |
DialogPortal | Portals its children into document.body. Used internally by DialogContent. |
DialogOverlay | The dimming backdrop. Rendered automatically by DialogContent. |
DialogContent | The dialog panel. Renders a built-in close (X) button. |
DialogHeader | Vertical stack for DialogTitle / DialogDescription. |
DialogFooter | A row for actions, right-aligned on larger screens. |
DialogTitle | The dialog's accessible name. |
DialogDescription | The dialog's accessible description. |
DialogClose | A button that closes the dialog. Supports asChild. |
Modal focus containment, Escape handling, labeling, and focus restoration are provided by React Aria Components.