Dialog

<script setup lang="ts">
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'

withDefaults(
  defineProps<{ from?: 'top' | 'bottom' | 'left' | 'right'; showCloseButton?: boolean }>(),
  { from: 'top', showCloseButton: true },
)
</script>

<template>
  <Dialog>
    <form>
      <DialogTrigger as-child>
        <Button variant="outline">
          Open Dialog
        </Button>
      </DialogTrigger>
      <DialogContent
        class="sm:max-w-[425px]"
        :from="from"
        :show-close-button="showCloseButton"
      >
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're
            done.
          </DialogDescription>
        </DialogHeader>
        <div class="grid gap-4">
          <div class="grid gap-3">
            <Label for="name-1">Name</Label>
            <Input id="name-1" name="name" default-value="Pedro Duarte" />
          </div>
          <div class="grid gap-3">
            <Label for="username-1">Username</Label>
            <Input id="username-1" name="username" default-value="@peduarte" />
          </div>
        </div>
        <DialogFooter>
          <DialogClose as-child>
            <Button variant="outline">
              Cancel
            </Button>
          </DialogClose>
          <Button type="submit">
            Save changes
          </Button>
        </DialogFooter>
      </DialogContent>
    </form>
  </Dialog>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

npx shadcn-vue@latest add dialog

pnpm dlx shadcn-vue@latest add dialog

yarn dlx shadcn-vue@latest add dialog

bun x shadcn-vue@latest add dialog

npx @animate-ui/cli@latest animate dialog

pnpm dlx @animate-ui/cli@latest animate dialog

yarn dlx @animate-ui/cli@latest animate dialog

bun x @animate-ui/cli@latest animate dialog

UsageCopy Anchor Link

<script setup lang="ts">
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <DialogRoot>
    <DialogTrigger>Edit profile</DialogTrigger>
    <DialogPortal>
      <DialogOverlay />
      <DialogContent>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription
          >Make changes to your profile here.</DialogDescription
        >
        <DialogClose>Save</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

SheetCopy Anchor Link

shadcn-vue's Sheet is built on this primitive: with data-side on its content, it slides in from that edge instead of tipping in. See Sheet.

AnimationCopy Anchor Link

Animate UI's React dialog motion, with a smoother overlay and a quicker exit.

• Overlay fades in from nothing to what its classes set: its background color deepens while its backdrop filter grows, so the page behind blurs progressively from 0 (fading its opacity would cross-fade the sharp page with an already blurred one). Over 400ms on a soft ease-out, along with the content's fade, and it leaves the same way.
• Content tips forward into place, around its center: it starts from perspective(500px) rotateX(-20deg) scale(0.8), transparent and blurred (4px), and comes upright and sharp on a spring (stiffness 150, damping 25), fading in ahead of it with the overlay (400ms on a soft ease-out): it's there first, then it settles. Dismissed, it goes back the way it came, at once, quicker and speeding away (0.2s, a steady push from half its average speed to one and a half), out of sight just before the overlay has cleared, then unmounts.
• from picks the edge the content tips from: top by default (rotateX(-20deg)), bottom (rotateX(20deg)), left (rotateY(20deg)) or right (rotateY(-20deg)) (a sheet, with data-side, slides from its side instead).
• On the overlay, exit-transition defaults to transition: change transition and both directions follow. A dialog's or a sheet's own exit is the quicker one above unless you set exit-transition.
• Animate UI keeps the Overlay and the Content mounted while they exit, and they leave together. Clicks go through to the page as soon as the dialog closes, and focus returns to the trigger once the exit is over, unless it has moved on meanwhile.
• Reopening while it closes picks up from where it is.
• Opening from the keyboard animates the same way; focus moves into the dialog at once.
• force-mount doesn't keep the closed dialog in the DOM: it plays its exit, then leaves, so a closed dialog never locks the page's scroll or hides it from screen readers.
• A DialogContent rendered without a DialogPortal animates on its own, and as-child renders your element with reka-ui's behaviour, without the animation.
• Under reduced motion, the content fades and un-blurs without tilting, scaling or sliding.
• AnimateUIProvider's tempo scales every duration and spring.

API ReferenceCopy Anchor Link

Every part takes exactly the props of reka-ui's Dialog. Animate UI adds the animation props below.

DialogRoot, DialogTrigger, DialogPortal, DialogTitle, DialogDescription, DialogCloseCopy Anchor Link

reka-ui props only. They are not animated.

DialogOverlayCopy Anchor Link

reka-ui props, plus:

DialogContentCopy Anchor Link

reka-ui props, plus: