Dialog

Modal overlay built on the native <dialog> element — scroll-lock and backdrop dismiss handled automatically.

Installation

npx nimbus-docs add dialog

yarn dlx nimbus-docs add dialog

pnpm dlx nimbus-docs add dialog

bunx nimbus-docs add dialog

Preview

Modal opens over the page; click backdrop or Cancel to dismiss.

<button onclick="document.getElementById('demo').showModal()">Open dialog</button>

<Dialog id="demo">
<DialogContent class="max-w-md">
  <div class="p-6 flex flex-col gap-3">
    <h3 class="text-base font-semibold">Confirm deploy</h3>
    <p class="text-sm text-muted-foreground">Production will rebuild from the current main branch.</p>
    <div class="flex justify-end gap-2 mt-2">
      <DialogClose class="px-3 py-1.5 rounded-md border border-border text-sm">Cancel</DialogClose>
      <DialogClose class="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm">Deploy</DialogClose>
    </div>
  </div>
</DialogContent>
</Dialog>

Examples

Confirmation

A simple confirm/cancel dialog with two DialogClose buttons styled as actions.

<button onclick="document.getElementById('confirm').showModal()">Delete project</button>

<Dialog id="confirm">
<DialogContent class="max-w-sm">
  <div class="p-6">
    <h3 class="text-base font-semibold mb-2">Are you sure?</h3>
    <p class="text-sm text-muted-foreground mb-4">This can't be undone.</p>
    <div class="flex justify-end gap-2">
      <DialogClose class="px-3 py-1.5 rounded-md border border-border text-sm">Cancel</DialogClose>
      <DialogClose class="px-3 py-1.5 rounded-md bg-danger text-white text-sm">Delete</DialogClose>
    </div>
  </div>
</DialogContent>
</Dialog>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`id`	`string`