Animated Dialog

scale x fade

Dialog with scale+fade enter animation and backdrop. From Animate UI.

dialogmodalanimateanimateui

Code

dialog-modal.tsx

"use client";
import { useEffect, useState } from "react";

export function Dialog({ open, onClose, title, children }: { open: boolean; onClose: () => void; title: string; children: React.ReactNode }) {
  useEffect(() => { if (open) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; return () => { document.body.style.overflow = ""; }; }, [open]);
  if (!open) return null;
  return (
    <>
      <div className="fixed inset-0 z-30 bg-black/50" onClick={onClose} />
      <div className="fixed left-1/2 top-1/2 z-40 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 animate-[fadeIn_0.2s_ease-out,scaleIn_0.2s_ease-out] rounded-xl border border-border bg-card p-6 shadow-xl">
        <h3 className="text-lg font-semibold">{title}</h3>
        <div className="mt-2 text-sm text-muted-foreground">{children}</div>
      </div>
    </>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Dialog component and wire it to my accent.”