Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Radix UI Base UI

Date Picker Drawer

On This Page

Installation Usage Examples Custom Close Button No Close Button Sticky Footer Scrollable Content API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add dialog

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

<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>

Use showCloseButton={false} to hide the close button.

import { Button } from "@/components/ui/button"
import {
  Dialog,

import { Button } from "@/components/ui/button"
import {
  Dialog,

import { Button } from "@/components/ui/button"
import {
  Dialog,

import { Button } from "@/components/ui/button"
import {
  Dialog,

import { Button } from "@/components/ui/button"
import {
  Dialog,