<Dialog>
<DialogTrigger asChild>
  <Button variant="outline">Share link</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
  <DialogHeader>
    <DialogTitle>Share link</DialogTitle>
    <DialogDescription>
      Anyone who has this link will be able to view this.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter showCloseButton />
</DialogContent>
</Dialog>

Dialog

tsx

import { Button } from "@/components/ui/button";import {Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger,} from "@/components/ui/dialog";export function DialogDemo() {return (  <Dialog>    <DialogTrigger asChild>      <Button variant="outline">Edit profile</Button>    </DialogTrigger>    <DialogContent className="sm:max-w-[425px]">      <DialogHeader>        <DialogTitle>Edit profile</DialogTitle>        <DialogDescription>          Make changes to your profile here. Click save when you&apos;re done.        </DialogDescription>      </DialogHeader>      <div className="grid gap-4">        <label className="grid gap-2 font-medium text-sm">          Name          <input            className="h-9 rounded-md border border-input bg-transparent px-3 font-normal"            defaultValue="Pedro Duarte"          />        </label>        <label className="grid gap-2 font-medium text-sm">          Username          <input            className="h-9 rounded-md border border-input bg-transparent px-3 font-normal"            defaultValue="@peduarte"          />        </label>      </div>      <DialogFooter>        <DialogClose asChild>          <Button variant="outline">Cancel</Button>        </DialogClose>        <Button type="submit">Save changes</Button>      </DialogFooter>    </DialogContent>  </Dialog>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/dialog.json"

Usage

tsx

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

tsx

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

API

Dialog

Built on Radix Dialog Root; accepts all its props.

Prop	Type	Default	Description
`open`	`boolean`	none	Whether the dialog is open. Use when controlled.
`defaultOpen`	`boolean`	`false`	Whether the dialog starts open.
`onOpenChange`	`(open: boolean) => void`	none	Called when the dialog opens or closes.
`modal`	`boolean`	`true`	Make the rest of the page inert while open.

DialogTrigger

The button that opens the dialog. Built on Radix Dialog Trigger; accepts all its props.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props.

DialogContent

The animated panel, portaled with its overlay. Built on Radix Dialog Content; accepts all its props.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Show the × button in the top-right corner.
`onOpenAutoFocus`	`(event: Event) => void`	none	Called when focus moves into the dialog on open. `event.preventDefault()` stops it.
`onCloseAutoFocus`	`(event: Event) => void`	none	Called when focus returns to the trigger on close. `event.preventDefault()` stops it.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	none	Called on Escape. `event.preventDefault()` keeps the dialog open.
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`	none	Called on a pointer down or focus outside. `event.preventDefault()` keeps the dialog open.
`forceMount`	`true`	none	Keep the content mounted while closed.

DialogHeader

Renders a native <div> that stacks the title and description, and accepts all of its props.

DialogFooter

Renders a native <div> for the actions and accepts all of its props.

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Append an outline "Close" button that closes the dialog.

DialogTitle, DialogDescription

Built on Radix Title and Description; each accepts all its props. Radix announces both when the dialog opens.

DialogClose

A button that closes the dialog. Built on Radix Dialog Close; accepts all its props, including asChild.

DialogPortal, DialogOverlay

Built on Radix Portal and Overlay; each accepts all its props. DialogContent already renders both; the overlay fades in and out.

Props match shadcn/ui Dialog.