Dialog

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

Preview & Interactive Laboratory

Standard Configuration

Premium Glass Visuals

Usage & Implementation

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

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent variant="glass">
    <DialogHeader>
      <DialogTitle>Confirmation</DialogTitle>
    </DialogHeader>
    Are you sure?
  </DialogContent>
</Dialog>

React / Tailwind

Granular Customization

Content

The dialog window.

className={`variant='glass'`}

Overlay

The dimmed background.

className={`className`}

Header

Container for title and description.

className={`className`}

API Reference (Props)

Prop	Type	Default	Description
variant	'default' \| 'glass'	'default'	The visual style of the dialog content.
showCloseButton	boolean	true	Whether to show the close icon button.
onOpenChange	function	-	Callback when the open state changes.