Alert Dialog

A modal dialog with morphing animations, spring physics, and focus management. Built with Motion for smooth layout animations and transitions.

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContainer,
  AlertDialogContent,
  AlertDialogBody,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogSubtitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/alert-dialog"

<AlertDialog transition={{ type: "spring", bounce: 0.25, duration: 0.5 }}>
  <AlertDialogTrigger>
    <Button>Show Details</Button>
  </AlertDialogTrigger>
  <AlertDialogContainer>
    <AlertDialogContent>
      <AlertDialogBody>
        <AlertDialogHeader>
          <AlertDialogTitle>Spring Animation</AlertDialogTitle>
          <AlertDialogSubtitle>With custom transition</AlertDialogSubtitle>
          <AlertDialogDescription>
            This dialog uses spring physics for smooth animations.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel className="w-full">Dismiss</AlertDialogCancel>
        </AlertDialogFooter>
      </AlertDialogBody>
    </AlertDialogContent>
  </AlertDialogContainer>
</AlertDialog>

Installation

Terminal

npx shadcn@latest add https://ui.edbn.me/r/alert-dialog.json

This will also install: motion-provider, button

Examples

Basic Dialog

A morphing dialog with smooth layout animations and spring physics.

With Subtitle

Use subtitle for additional context and custom spring transitions.

Common Patterns

Example use cases for morphing dialogs.

API Reference

AlertDialog

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content of the dialog including triggers and content
`open`	`boolean`	—	Controlled open state. Use with onOpenChange for controlled behavior.
`defaultOpen`	`boolean`	`false`	Default open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`transition`	`Transition`	—	Custom transition settings from motion for animation effects.
`disableAnimation`	`boolean`	—	Disable all animations for the dialog.

AlertDialogTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content of the trigger, typically a Button component
`className`	`string`	—	Optional CSS class for styling the trigger wrapper
`style`	`React.CSSProperties`	—	Inline styles for the trigger wrapper
`asChild`	`boolean`	`false`	When true, the trigger will merge props with its child element. Recommended for use with Button components.

AlertDialogContainer

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to render inside the portal, typically AlertDialogContent
`className`	`string`	—	Optional CSS class for the container
`style`	`React.CSSProperties`	—	Inline styles for the container

The Container renders content in a portal with backdrop overlay.

AlertDialogContent

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content displayed within the dialog when it is open
`className`	`string`	—	Optional CSS class for styling the content container
`style`	`React.CSSProperties`	—	Inline styles for the content container
`showCloseButton`	`boolean`	`false`	Shows an X button in the top-right corner for closing the dialog
`preventEscapeClose`	`boolean`	`false`	Prevents closing the dialog when pressing Escape key.
`preventOutsideClose`	`boolean`	`false`	Prevents closing the dialog when clicking outside the content area

AlertDialogBody

Prop	Type	Default	Description
`children`	`ReactNode`	—	The main content of the dialog including header and footer
`className`	`string`	—	Optional CSS class for customizing padding and spacing

Provides consistent padding (p-6 sm:p-8), centered layout, and proper spacing.

AlertDialogHeader

Prop	Type	Default	Description
`children`	`ReactNode`	—	Title, subtitle, and description elements
`icon`	`ReactNode`	—	Optional icon element to display above content
`iconClassName`	`string`	—	CSS classes for the icon wrapper (e.g., 'bg-destructive/10')
`className`	`string`	—	Optional CSS class for the header container

AlertDialogFooter

Prop	Type	Default	Description
`children`	`ReactNode`	—	Action buttons (AlertDialogAction, AlertDialogCancel)
`className`	`string`	—	Optional CSS class for customizing button layout

AlertDialogTitle

Prop	Type	Default	Description
`children`	`ReactNode`	—	The title content of the dialog
`className`	`string`	—	Optional CSS class for the title element

AlertDialogSubtitle

Prop	Type	Default	Description
`children`	`ReactNode`	—	The subtitle content of the dialog
`className`	`string`	—	Optional CSS class for the subtitle element

AlertDialogDescription

Prop	Type	Default	Description
`children`	`ReactNode`	—	The descriptive content of the dialog
`className`	`string`	—	Optional CSS class for the description container

AlertDialogAction

Prop	Type	Default	Description
`children`	`ReactNode`	—	Button content
`variant`	`"default" \| "destructive"`	`"default"`	Button style variant. Use 'destructive' for dangerous actions.
`disabled`	`boolean`	`false`	Disables the button
`onClick`	`(e: React.MouseEvent) => void`	—	Click handler. Dialog closes after unless e.preventDefault() is called.
`className`	`string`	—	Optional CSS class for the button

AlertDialogCancel

Prop	Type	Default	Description
`children`	`ReactNode`	`"Cancel"`	Button content
`disabled`	`boolean`	`false`	Disables the button
`onClick`	`(e: React.MouseEvent) => void`	—	Click handler. Dialog closes after unless e.preventDefault() is called.
`className`	`string`	—	Optional CSS class for the button

Best Practices

Action Clarity

Use asChild pattern: Pair asChild with Button so only the surface morphs and text stays crisp.
Lead with consequence: Put the destructive action first. Keep primary copy short (2 lines max).

Safety Net

Disable until ready: Disable confirmation button until critical data needed to proceed is available.
Explicit confirmation: Require explicit action (checkbox, text confirm) only for irreversible flows.

Copy Guidelines

Use action verbs: Use verbs on actions ("Delete account", "Keep data") so the choice is clear without scanning the body.
Highlight consequences: Add the most alarming fact in the description, not the header (e.g., "removes all backups").

Accessibility

Alert dialog pattern for critical actions that require confirmation.

Keyboard

TabNavigate through dialog

⇧+Tab

Navigate backwards

EscClose dialog (use preventEscapeClose to disable)

Screen Readers

• role="alertdialog" with aria-modal

• Title linked via aria-labelledby

• Async states use aria-busy

Focus Management

Initial focus: Focus moves to the first interactive element when opened.
Focus trapping: Focus stays inside until an action is taken.
Focus restoration: On close, focus returns to the trigger element.