Dialog

Installation

pnpm dlx shadcn@latest add @paneui/dialog

Usage

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger render={<Button variant="secondary" />}>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Archive project?</DialogTitle>
      <DialogDescription>You can restore it from Settings.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="secondary" />}>Cancel</DialogClose>
      <DialogClose render={<Button />}>Archive</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Composition

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter
        └── DialogClose

Examples

Destructive

With Form

No Close Button

Long Content

RTL

Motion

The backdrop fades and the popup scales from 96% and rises 8px over 250ms; it scales back down as it closes. With reduced motion it only fades.

Accessibility

Focus is trapped inside the popup and returns to the trigger on close. Esc and a backdrop click close it. DialogTitle and DialogDescription label the dialog.

API Reference

Built on the Dialog primitive. Only the props this library adds or changes are listed; everything else passes through.

Re-export of the primitive root. Also accepts every prop of Dialog.Root.

open: boolean; Controlled open state.
defaultOpen= false: boolean; Initial state when uncontrolled.
onOpenChange: (open: boolean, eventDetails) => void; Called when the dialog opens or closes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Initial state when uncontrolled.
onOpenChange	(open: boolean, eventDetails) => void	—	Called when the dialog opens or closes.

DialogTrigger

Re-export. Use render to make a Button the trigger. Also accepts every prop of Dialog.Trigger.

DialogContent

Portal, backdrop and centred popup (max-width 28rem, max-height the viewport minus 1rem each side). Taller content scrolls inside it with overscroll-contain, so the page doesn't scroll. Also accepts every prop of Dialog.Popup.

showClose= true: boolean; Render the close button. It stays pinned while long content scrolls and comes last in the focus order.

Prop	Type	Default	Description
showClose	boolean	true	Render the close button. It stays pinned while long content scrolls and comes last in the focus order.

data-starting-style: Present while opening (scaled down, transparent).
data-ending-style: Present while closing.

Data attribute	Description
data-starting-style	Present while opening (scaled down, transparent).
data-ending-style	Present while closing.

DialogHeader

Stacks title and description, with right padding to clear the close button. Also accepts every prop of div.

DialogFooter

Right-aligned action row. Also accepts every prop of div.

DialogTitle

Also accepts every prop of Dialog.Title.

DialogDescription

Also accepts every prop of Dialog.Description.

DialogClose

Re-export. Closes the dialog when pressed. Also accepts every prop of Dialog.Close.