Glass Dialog

Modal liquid glass dialog — blurred scrim, a frosted tinted panel that scales into place, with accessible title, description, close, and footer parts.

Playground

Edit the props live and copy the config.

Tint

0.5

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent tint={0.5}>
    <DialogTitle>Delete project?</DialogTitle>
    <DialogDescription>This can’t be undone.</DialogDescription>
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <DialogClose>Delete</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-dialog.json

Usage

DialogContent renders its own scrim and portals to <body>, so no separate overlay or portal part is needed.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogFooter,
} from '@/components/ui/glass-dialog';

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent>
    <DialogTitle>Confirm action</DialogTitle>
    <DialogDescription>This cannot be undone.</DialogDescription>
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <DialogClose onClick={handleConfirm}>Confirm</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Components

Dialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(v: boolean) => void`	—	Fires on open change.

DialogContent

Prop	Type	Default	Description
`tint`	`number`	`0.5`	Frosted tint of the dialog panel.

Clicking the scrim or pressing Escape closes the dialog. The content panel scales in from 95% with a fade, and body scroll is locked while open.