Installation

pnpm dlx shadcn-vue@latest add dialog 

Usage

<script setup lang="ts"> import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger, } from '@/components/ui/dialog' </script>  <template>  <Dialog>  <DialogTrigger>  Edit Profile  </DialogTrigger>  <DialogContent>  <DialogHeader>  <DialogTitle>Edit profile</DialogTitle>  <DialogDescription>  Make changes to your profile here. Click save when you're done.  </DialogDescription>  </DialogHeader>   <DialogFooter>  Save changes  </DialogFooter>  </DialogContent>  </Dialog> </template>

Examples

Custom close button

Scroll body

Scroll overlay

Form

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>