Dialog

bunx shadcn@latest add @nalarx/dialog

UsageCopy Anchor Link

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent showCloseButton>
    <DialogHeader>
      <DialogTitle>Rename dashboard</DialogTitle>
      <DialogDescription>The new name shows in the sidebar.</DialogDescription>
    </DialogHeader>
    {/* fields */}
    <DialogFooter>
      <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
      <Button variant="accent" onClick={save}>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

A form dialog with the close X, and a centred one without it. The popup opens in the docs page's own scheme.

For alert, confirm and prompt, use App dialog instead of building one.

StatesCopy Anchor Link

• Open: grows from 97% while the backdrop fades in; leaves a little faster than it came. No motion under reduced motion.
• Tall content: the viewport layer scrolls; the popup keeps its top anchor.
• Phones: the popup takes the width minus 16px each side; the close X grows to 36px.

KeyboardCopy Anchor Link

Pointer: a press outside the popup closes it, unless disablePointerDismissal is set on Dialog.

PropsCopy Anchor Link

Dialog takes Base UI Dialog.Root props (open, onOpenChange, defaultOpen, modal, disablePointerDismissal). DialogContent takes Dialog.Popup props (initialFocus, finalFocus, className) plus:

dialogBackdropClass is the backdrop's class list for a hand-built overlay.

ReplacesCopy Anchor Link

Platform base/Dialog.tsx; dialogBackdrop.ts in both apps (DIALOG_BACKDROP_CLASS becomes a re-export of dialogBackdropClass).