Dialog

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

Get Started

Components

Blocks

Changelog

Installation

Preview

Usage

Examples

Basic

Usage notes

Avoid

​Installation

​Preview

​Usage

​Examples

​Basic

​Usage notes

​Avoid

Installation

Preview

Usage

Examples

Basic

Usage notes

Avoid