Component

Dialog

Modal dialog with overlay, scale animation, and accessible focus management via Base UI.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/dialog

Usage

Use dialogs for focused tasks that require user input before continuing. Keep content concise.

Composition

Button Input

Playground

Preview

Configure

Code

<Dialog>
  <DialogTrigger render={<Button variant="outline">Edit Profile</Button>} />
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>
      <DialogClose />
      <DialogHeader>
        <DialogTitle>Edit Profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you are done.
        </DialogDescription>
      </DialogHeader>
      <div className="grid gap-3 py-4">
        <div className="grid gap-1.5">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Jane Doe" />
        </div>
      </div>
      <DialogFooter>
        <DialogClose render={<Button variant="outline">Cancel</Button>} />
        <Button>Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </DialogPortal>
</Dialog>

Variants & States

Supported variants, sizes, and interaction states for this component.

States

Closed
Open

Do

Always provide a close button (X) and a Cancel action
Use for destructive confirmations and focused form flows

Don't

Don't stack dialogs, close the current one before opening another
Don't put scrolling content inside dialogs, use a drawer instead