Animated Dialog

Use Animated Dialog for a modal task that needs an accessible dialog foundation and a short directional entrance. It provides the dialog structure, focus management, and close behavior while leaving the content and actions to your application.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Base UI Motion

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

Basic usage

confirm-dialog.tsx

import {
AnimatedDialog,
AnimatedDialogClose,
AnimatedDialogContent,
AnimatedDialogDescription,
AnimatedDialogTitle,
AnimatedDialogTrigger,
} from "@/components/ui/animated-dialog/animated-dialog";
 
export function ConfirmDialog() {
return (
  <AnimatedDialog>
    <AnimatedDialogTrigger>Delete project</AnimatedDialogTrigger>
    <AnimatedDialogContent from="bottom">
      <AnimatedDialogTitle>Delete this project?</AnimatedDialogTitle>
      <AnimatedDialogDescription>
        This action cannot be undone.
      </AnimatedDialogDescription>
      <div className="mt-6 flex justify-end gap-3">
        <AnimatedDialogClose>Cancel</AnimatedDialogClose>
        <AnimatedDialogClose className="bg-destructive text-destructive-foreground">
          Delete
        </AnimatedDialogClose>
      </div>
    </AnimatedDialogContent>
  </AnimatedDialog>
);
}

Examples

Direction

Set from and exitTo when the dialog should enter and leave in a particular direction. Use the center direction for a scale and fade treatment.

direction.tsx

<AnimatedDialogContent from="left" exitTo="top">
<AnimatedDialogTitle>Details</AnimatedDialogTitle>
</AnimatedDialogContent>

Controlled state

Use open and onOpenChange when another part of the interface needs to control the dialog state.

Usage


"use client";
 
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 className="bg-destructive/80 hover:bg-destructive hover:cursor-pointer">
              Cancel
            </AnimatedDialogClose>
            <AnimatedDialogClose className="bg-primary/80 hover:bg-primary text-primary-foreground hover:cursor-pointer">
              Confirm
            </AnimatedDialogClose>
          </div>
        </AnimatedDialogContent>
      </AnimatedDialog>
    </div>
  );
}

API

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.

Accessibility

The component uses Base UI dialog semantics, including focus management, Escape dismissal, and accessible labels. Include a title and description that clearly explain the task before asking someone to act.

Styling

Style the content and action controls with class name options. Reduced-motion preferences replace directional movement with a simpler transition.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI