Command Palette

Search for a command to run...

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

DocsAPI Reference

Installation

npx shadcn@latest add dialog

Usage

import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/xfork-ui/dialog"
<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Are you absolutely sure?</DialogTitle>
    <DialogDescription>
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </DialogDescription>
  </DialogHeader>
</DialogContent>
</Dialog>

Examples

Custom close button

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>