Dialogs, drawers, and overlays for focused actions, inputs, or critical confirmations built on a strict compound pattern.
defaultStandard popups — confirmations, simple forms, settings dialogsglassHigh-end marketing or dashboard modals needing premium backdrop-blurdestructiveCritical warnings — irreversible deletion, security confirmationssuccessPositive confirmation — payment success, operation completefullscreenImmersive workflows — large content editing, step-by-step wizardsdrawerMobile-optimized views — slide-up panels from the bottomThe dialog is closed. Click the button below or check the "isOpen" control to open it.
Whether the dialog is open
Visual theme of the dialog content
Size width of the dialog window
Title of the dialog (Mapped to <DialogTitle>)
Description of the dialog content (Mapped to <DialogDescription>)
Label for the confirm action button
Label for the cancel action button
Whether the body content is scrollable
Inner content of the modal dialog
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, Button } from "nexoreui"
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>This is a detailed description of the dialog action.</DialogDescription>
</DialogHeader>
<div className="py-4">Provide modal details here. This can be form inputs, progress steps, or text explanation.</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "glass" | "destructive" | "success" | "fullscreen" | "drawer" | "default" | Visual style variant of the dialog content. |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "lg" | Responsive width profile of the dialog. |
| scrollable | boolean | false | Enables vertical scrolling within the dialog body if content overflows. |
role="dialog"), aria-describedby, and aria-labelledby attributes.