Dialog
A window overlaid on the primary window, rendering the content underneath inert.
When to use
Use a Dialog for a focused create or edit task the user should finish without losing the screen behind it, typically a short form with Save and Cancel. When the decision is destructive or irreversible, use AlertDialog instead so it cannot be dismissed by clicking outside; when the content is a long form or a detail panel, use Sheet.
Platform notes
Elevation here is not a shadow: DialogContent ships shadow-lg, which the theme resolves to a transparent value, so the bg-black/50 overlay and the content border are the only separation from the page. That matters in light mode, where --background, --card and --popover are all the same white, so never strip the border from DialogContent. Always render DialogTitle and DialogDescription (Radix uses them for the accessible name and description) and source every label, including the trigger and footer buttons, from react-i18next. The primitive stays in shared/ui; the form inside it belongs to the feature slice that owns the use case, wired with react-hook-form and zod.
Install
npx shadcn@latest add dialogCode
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";
import { Label } from "@/components/ui/label";
export function DialogDemo() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Edit profile</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>Make changes to your profile here.</DialogDescription>
</DialogHeader>
<div className="grid gap-3">
<Label htmlFor="name">Name</Label>
<Input id="name" defaultValue="Plain Concepts" />
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}