Dialog

A centered modal over a blurred scrim.

Install

npx shadcn add @clearly/dialog

Live Dialog component — see usage below.

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

<Dialog />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`—`	Open-state callback.
`glass`	`"Subtle" \| "Medium" \| "Strong"`	`"Medium"`	Glass depth of the dialog content.
`specular`	`boolean`	`true`	Directional specular highlight on the content panel.
`radius`	`number`	`24`	Corner radius of the content panel in px.
`showCloseButton`	`boolean`	`true`	Show the × close button inside the content.