Dialog

Component Installation Procedure

npx shadcn@latest add dialog

Implementing the Dialog Component

  Dialog, // The main container component managing the dialog's open/close state.
  DialogClose, // Optional component to create a button that closes the dialog.
  DialogContent, // The modal panel that appears, containing the dialog's content.
  DialogDescription, // Component for providing accessible descriptive text for the dialog.
  DialogFooter, // Optional container for placing actions like confirm/cancel buttons.
  DialogHeader, // Optional container for the title and description.
  DialogTitle, // Component for the main title of the dialog.
  DialogTrigger, // Wraps the element (e.g., a button) that opens the dialog on interaction.
} from "@/components/ui/dialog"; // Adjust import path as needed.

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">{/* Form fields */}</div>

    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

The core structure involves wrapping the element that opens the dialog (like a <Button>) with <DialogTrigger> and placing the modal's content inside <DialogContent>. Optional components like <DialogHeader>, <DialogTitle>, <DialogDescription>, and <DialogFooter> help structure the content semantically and visually. The open/close state is managed internally by default, but can be controlled via the open and onOpenChange props on the root <Dialog> component.

Dialog Component Examples

Dialog with Custom Close Button

Important Integration Notes

To activate the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component. For more information, refer to the linked issue here.

<Dialog>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Open</ContextMenuItem>
      <ContextMenuItem>Download</ContextMenuItem>
      <DialogTrigger asChild>
        <ContextMenuItem>
          <span>Delete</span>
        </ContextMenuItem>
      </DialogTrigger>
    </ContextMenuContent>
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Are you sure you want to permanently
        delete this file from our servers?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>