Dialog

A window overlaid on the page, rendering content that requires user attention or interaction.

$bunx shadcn@latest add @nx-ui/dialog
Registry item
Installs withbuttonutils
Used byai-model-selectorcommandewc-selectorlocation-selectormaterial-selectormedia-player

Basic

DialogTrigger opens the popup; DialogHeader groups the title and description. A close button is rendered in the corner by default.

Widths

DialogContent defaults to max-w-md; pass a className to widen or narrow it for the content it holds.

Composition: edit site details

A form dialog with labelled fields, a select and a textarea, matching Nexus ReGen's site editor.

Controlled with pending state

Drive `open` yourself to keep the dialog open while a submission is in flight, then close it once the work resolves.

No close button

Set showCloseButton to false on DialogContent when every exit should be an explicit, labelled action.

API reference

Exported parts and their props, extracted from the component source.