Dialog

A dialog is an overlay shown above other content in an application.

On this page

Props

title

description

isDismissable

<Dialog>
  <Button>Open Dialog</Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>This is a dialog description.</DialogDescription>
      </DialogHeader>
      <DialogBody>
        <p>Dialog content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Cancel</Button>
        <Button slot="close" variant="primary">
          Confirm
        </Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/dialog

Usage

Use dialog to grab the user's attention for critical tasks, like confirming actions, providing additional details, or capturing input.

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Overlay } from '@/components/ui/overlay'

<Dialog>
  <Button>Open dialog</Button>
  <Overlay>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>Dialog description</DialogDescription>
      </DialogHeader>
      <DialogBody>Content</DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Overlay>
</Dialog>

Examples

API Reference

Dialog

A DialogTrigger opens a dialog when a trigger element is pressed.

Prop	Type	Default

DialogContent

A dialog is an overlay shown above other content in an application.

Prop	Type	Default
	`ReactNode \| function`	`—`

DialogHeader

The header of the dialog. Contains the title and description.

Supports all header attributes.

Prop	Type	Default

DialogTitle

The heading that labels the dialog.

Prop	Type	Default
	`number`	`3`

DialogDescription

Text that describes the purpose of the dialog.

Prop	Type	Default

DialogBody

The main content area of the dialog.

Supports all div attributes.

Prop	Type	Default
	`boolean`	`—`

DialogFooter

The footer of the dialog. Contains the dialog's actions.

Supports all footer attributes.

Prop	Type	Default

Last updated on 6/16/2026