Animated Dialog

Installation

npx shadcn@latest add https://ui.thilina.dev/r/animated-dialog.json

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/animated-dialog";
import { Button } from "@/components/ui/button";

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>This action is permanent.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Same parts and API as the shadcn/ui Dialog. The difference is the exit: the overlay and panel animate out through AnimatePresence instead of unmounting abruptly, and the entrance is a spring with scale and blur.

Props

All parts accept their Radix Dialog props (open, defaultOpen, onOpenChange, modal). DialogContent adds showCloseButton (default true) to hide the corner close control.

Accessibility

Radix Dialog underneath: focus is trapped and restored, Escape closes, and the title and description are wired to the panel with ARIA. Under prefers-reduced-motion the spring entrance and exit collapse to a plain fade.