Dialog

A window overlaid on either the primary window or another dialog window.

Installation

Preview

Usage

import { Dialog } from '@/components/ui/dialog'

A window overlaid on either the primary window or another dialog window.

Examples

Basic

Preview

Code

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
  </DialogContent>
</Dialog>

Usage notes

Always include DialogTitle for accessibility. Use DialogDescription for context.

Avoid

• Do not omit DialogTitle
• Do not nest dialogs