Dialog
A modal veil centered over a frosted scrim. Focus is trapped, Escape closes, and focus returns to the trigger.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/dialog.jsonExamples
Default
"use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
export function DialogDemo() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Rename project</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Rename project</DialogTitle>
<DialogDescription>
The new name appears everywhere the project is referenced.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-2">
<label htmlFor="project-name" className="text-sm font-medium">
Name
</label>
<Input id="project-name" defaultValue="Meridian" />
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="ghost">Cancel</Button>
</DialogClose>
<DialogClose asChild>
<Button variant="accent">Save</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}API
<DialogContent />
| Prop | Type | Default | Description |
|---|---|---|---|
| showCloseButton | boolean | true | Render the corner close button. |