Animated Dialog

A composable, highly accessible dialog modal built on Base UI Dialog primitives and styled with Motion. It supports directional slide transitions (animating from the top, bottom, left, right, or center).

Features

Directional Entrance & Exit — Configure modal transitions (from / exitTo) to slide from different vector origins.
Responsive Motion — Uses short, interruptible transitions for the surface and backdrop, without overshoot on modal entrance.
Standard Composable API — Compose layouts with AnimatedDialog, Trigger, Content, Title, Description, and Close.
Portal & Accessibility — Handles focus locking, scroll trapping, screen-readers, and rendering overlays cleanly via Base UI.
Controlled or uncontrolled — Use open/onOpenChange or defaultOpen as needed.
RTL & SSR Safe — Hydrates styles without layout shifting.
Reduced Motion — Seamlessly bypasses physical slide translations to fade in/out instantly.

Playground

Explore different slide options live.

Controls

Slide From

Installation

npx shadcn@latest add @sona-ui/animated-dialog

Usage


"use client";
 
import { useState } from "react";
import {
  AnimatedDialog,
  AnimatedDialogClose,
  AnimatedDialogContent,
  AnimatedDialogDescription,
  AnimatedDialogTitle,
  AnimatedDialogTrigger,
} from "@/components/ui/animated-dialog/animated-dialog";
 
export default function AnimatedDialogDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <AnimatedDialog>
        <AnimatedDialogTrigger>Open Dialog</AnimatedDialogTrigger>
        <AnimatedDialogContent from={"bottom"}>
          <AnimatedDialogTitle>Directional Transition</AnimatedDialogTitle>
          <AnimatedDialogDescription>
            This modal is configured to animate from the{" "}
            <span className="font-semibold text-foreground capitalize">
              "Bottom"
            </span>
            . You can test all entry vectors using the switcher above.
          </AnimatedDialogDescription>
          <div className="mt-6 flex justify-end gap-3">
            <AnimatedDialogClose
              render={
                <button
                  type="button"
                  className="inline-flex items-center justify-center rounded-lg px-4 py-2 bg-secondary text-secondary-foreground text-sm font-medium hover:bg-muted transition-colors hover:cursor-pointer"
                >
                  Cancel
                </button>
              }
            />
            <AnimatedDialogClose
              render={
                <button
                  type="button"
                  className="inline-flex items-center justify-center rounded-lg px-4 py-2 bg-primary text-primary-foreground text-sm font-medium transition-colors hover:cursor-pointer"
                >
                  Confirm
                </button>
              }
            />
          </div>
        </AnimatedDialogContent>
      </AnimatedDialog>
    </div>
  );
}

Code Examples

Directional Slide

Choose how the content surfaces by setting the from and exitTo options.

directional-modal.tsx

import {
AnimatedDialog,
AnimatedDialogContent,
AnimatedDialogTrigger,
AnimatedDialogTitle,
AnimatedDialogDescription,
} from "@/components/ui/animated-dialog";
 
export function Modal() {
return (
  <AnimatedDialog>
    <AnimatedDialogTrigger>Trigger</AnimatedDialogTrigger>
    {/* Slides in from the left, exits sliding up towards the top */}
    <AnimatedDialogContent from="left" exitTo="top">
      <AnimatedDialogTitle>Info</AnimatedDialogTitle>
      <AnimatedDialogDescription>
        Detailed descriptions here.
      </AnimatedDialogDescription>
    </AnimatedDialogContent>
  </AnimatedDialog>
);
}

Center Scale

Configure from="center" for standard modal zoom-fade effects.

center-modal.tsx

<AnimatedDialogContent from="center">
<AnimatedDialogTitle>Static Centered Modal</AnimatedDialogTitle>
</AnimatedDialogContent>

Action Toasts

Trigger notifications on confirmation or cancellation actions.

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`
`open`	`boolean`	`—`
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`—`
`modal`	`boolean`	`true`	Whether the dialog traps interaction inside the modal.