Dialog
A Radix-based modal dialog with glass-morphism backdrop blur, animated open/close transitions, and built-in close button.
Preview
Installation
npx shadcn@latest add @shadszn/dialogUsage
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
export default function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Action</DialogTitle>
<DialogDescription>
Are you sure you want to proceed? This action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="ghost">Cancel</Button>
</DialogClose>
<Button variant="primary">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}Subcomponents
| Prop | Type | Default | Description |
|---|---|---|---|
| Dialog | Root | --- | Root component. Controls open state. |
| DialogTrigger | Trigger | --- | Element that opens the dialog. |
| DialogContent | Content | --- | The modal content panel with overlay and close button. |
| DialogHeader | div | --- | Layout wrapper for title and description. |
| DialogTitle | Title | --- | Accessible dialog title. |
| DialogDescription | Description | --- | Accessible dialog description. |
| DialogFooter | div | --- | Layout wrapper for action buttons. |
| DialogClose | Close | --- | Closes the dialog when clicked. |