Animated Modal
Modal dialog with spring-based entry/exit animations and backdrop blur.
Preview
Animated Modal
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Confirmation dialogs, detail views, and focused interactions.
Why this component matters
A well-animated modal feels intentional and grounded, not jarring. The spring physics create a natural feel.
Usage guidance
Use for confirmations and focused content that requires a decision. Keep modal content concise. Include clear close affordances (X, backdrop click, Escape key).
Installation
bash
npx shadcn@latest add @aceternity/animated-modalUsage
example.tsxtsx
import { AnimatedModal } from "@/components/ui/animated-modal";
export default function Example() {
return (
<AnimatedModal>
{/* Your content here */}
</AnimatedModal>
);
}Source
animated-modal.tsx
components/ui/animated-modal.tsx