shadcn-vue/apps/www/src/content/docs/components/dialog.md

title	description	source	primitive
Dialog	A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.	apps/www/src/lib/registry/default/ui/dialog	https://www.radix-vue.com/components/dialog.html

Installation

npx shadcn-vue@latest add dialog

1. Install radix-vue:

npm install radix-vue

2. Copy and paste the component source files linked at the top of this page into your project.

Usage

<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/lib/registry/default/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>