Are the ai2 Motion alert dialogs free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Motion alert dialogs

Five confirmation dialogs with showy entrances: shake, pop, drop, zoom and slide. Each is self-contained (no radix), sized, driven by a tone token, and closes on backdrop click or Escape.

Alert dialogMotion

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/alert-dialog-motion

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/alert-dialog-motion.tsx

"use client"

import * as React from "react"
import { AlertTriangle, ArrowDown, ArrowUp, Sparkles, Zap } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Motion alert-dialog family: 5 showy confirmation modals. The panel itself is
   plain; the DIFFERENCE is in the enter/exit animation. Each export is a complete
   modal: internal open/closed state (uncontrolled defaultOpen or controlled
   open/onOpenChange), NO radix or portal - a self-contained fixed backdrop +
   centered fixed panel. It closes on a backdrop click, Escape or Cancel; Confirm
   calls onConfirm first and then closes. The panel takes focus on open.
   AnimatePresence handles enter/exit; under reduced motion ALL transforms drop
   away and only an opacity fade remains. Color comes ONLY from tokens, via alpha
   color-mix. Size = panel width. The tone tokens drive the icon and the confirm
   button. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

export type StyledTone = "info" | "success" | "warning" | "danger"

const panelWidth: Record<StyledSize, string> = {
  sm: "max-w-sm",
  md: "max-w-md",
  lg: "max-w-lg",
  xl: "max-w-xl",
}

const bodyPad: Record<StyledSize, string> = {
  sm: "p-4",
  md: "p-5",
  lg: "p-6",
  xl: "p-7",
}

/* Confirm button tone mapping - the tone token drives it directly. */
const confirmTone: Record<StyledTone, string> = {
  info: "bg-info text-info-foreground hover:bg-info/90",
  success: "bg-success text-success-foreground hover:bg-success/90",
  warning: "bg-warning text-warning-foreground hover:bg-warning/90",
  danger: "bg-danger text-danger-foreground hover:bg-danger/90",
}

const cancelBtn =
  "inline-flex h-9 items-center justify-center rounded-md border border-border bg-transparent px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const confirmBtn =
  "inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

/* Per-variant enter/exit animation. Value arrays (e.g. shake) are supported. */
type PanelMotion = {
  initial: Record<string, number | number[]>
  animate: Record<string, number | number[]>
  exit: Record<string, number | number[]>
  transition?: Record<string, unknown>
}

type StyledAlertPublicProps = {
  size?: StyledSize
  trigger?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  confirmLabel?: string
  cancelLabel?: string
  onConfirm?: () => void
  className?: string
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (o: boolean) => void
}

type StyledAlertCoreProps = StyledAlertPublicProps & {
  tone: StyledTone
  confirmClassName: string
  icon: React.ReactNode
  iconClassName: string
  panelMotion: PanelMotion
}

/* Shared modal core: state management, backdrop, panel, escape, focus, motion. panelMotion carries the enter/exit animation supplied from outside; it differs in every export. Under reduced motion panelMotion is ignored and only a fade is applied. */
function StyledAlertDialog({
  size = "md",
  trigger,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  className,
  open,
  defaultOpen,
  onOpenChange,
  tone,
  confirmClassName,
  icon,
  iconClassName,
  panelMotion,
}: StyledAlertCoreProps) {
  const reduce = useReducedMotion()
  const isControlled = open !== undefined
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
  const actualOpen = isControlled ? open : internalOpen
  const panelRef = React.useRef<HTMLDivElement>(null)

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setInternalOpen(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )

  React.useEffect(() => {
    if (!actualOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    document.addEventListener("keydown", onKey)
    const raf = window.requestAnimationFrame(() => panelRef.current?.focus())
    return () => {
      document.removeEventListener("keydown", onKey)
      window.cancelAnimationFrame(raf)
    }
  }, [actualOpen, setOpen])

  const handleConfirm = () => {
    onConfirm?.()
    setOpen(false)
  }

  /* reduced motion: no transform, only an opacity fade. */
  const fade: PanelMotion = {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
    transition: { duration: 0.2, ease: "easeOut" },
  }
  const m = reduce ? fade : panelMotion

  return (
    <span data-slot="styled-alert-dialog" className="contents">
      {/* ARIA durumu tetikleyicinin KENDISINDE. Once yoktu: ekran okuyucu

          kullanicisi butonun bir dialog actigini ve acik olup olmadigini

          HIC bilmiyordu. Canli AX taramasiyla bulundu (grep gostermemisti). */}

      <span data-slot="styled-alert-dialog-trigger" className="inline-flex">

        {React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(trigger) ? (

          React.cloneElement(trigger, {

            "aria-haspopup": "dialog",

            "aria-expanded": actualOpen,

            onClick: (event: React.MouseEvent<HTMLButtonElement>) => {

              trigger.props.onClick?.(event)

              setOpen(true)

            },

          })

        ) : (

          <button

            type="button"

            aria-haspopup="dialog"

            aria-expanded={actualOpen}

            onClick={() => setOpen(true)}

            className="inline-flex h-9 items-center justify-center rounded-md border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"

          >

            {trigger ?? "Open"}

          </button>

        )}

      </span>

      <AnimatePresence>
        {actualOpen ? (
          <>
            <motion.div
              data-slot="styled-alert-dialog-backdrop"
              className="fixed inset-0 z-50 bg-[color-mix(in_oklab,var(--color-foreground)_45%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm"
              onClick={() => setOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            />
            <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4">
              <motion.div
                ref={panelRef}
                role="alertdialog"
                aria-modal="true"
                tabIndex={-1}
                onClick={(e) => e.stopPropagation()}
                className={cn(
                  "pointer-events-auto w-full rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
                  panelWidth[size],
                  className
                )}
                initial={m.initial}
                animate={m.animate}
                exit={m.exit}
                transition={m.transition ?? { duration: 0.2, ease: "easeOut" }}
              >
                <div data-tone={tone} className={cn("flex flex-col", bodyPad[size])}>
                  <div className="flex gap-3">
                    <span
                      data-slot="styled-alert-dialog-icon"
                      className={cn(
                        "mt-0.5 flex shrink-0 items-center [&_svg]:size-5 [&_svg]:shrink-0 [&_i]:text-xl [&_i]:leading-none",
                        iconClassName
                      )}
                    >
                      {icon}
                    </span>
                    <div className="min-w-0 flex-1">
                      {title ? (
                        <h2
                          data-slot="styled-alert-dialog-title"
                          className="text-base font-semibold tracking-tight text-foreground"
                        >
                          {title}
                        </h2>
                      ) : null}
                      {description ? (
                        <p
                          data-slot="styled-alert-dialog-description"
                          className="mt-1 text-sm text-muted-foreground"
                        >
                          {description}
                        </p>
                      ) : null}
                    </div>
                  </div>

                  <div
                    data-slot="styled-alert-dialog-footer"
                    className="mt-5 flex justify-end gap-2"
                  >
                    <button
                      type="button"
                      data-slot="styled-alert-dialog-cancel"
                      className={cancelBtn}
                      onClick={() => setOpen(false)}
                    >
                      {cancelLabel}
                    </button>
                    <button
                      type="button"
                      data-slot="styled-alert-dialog-confirm"
                      className={cn(confirmBtn, confirmClassName)}
                      onClick={handleConfirm}
                    >
                      {confirmLabel}
                    </button>
                  </div>
                </div>
              </motion.div>
            </div>
          </>
        ) : null}
      </AnimatePresence>
    </span>
  )
}

/* ShakeAlert: the danger tone. The panel enters shaking horizontally (an x keyframe sequence) - an attention-grabbing warning. For irreversible or dangerous flows. */
export function ShakeAlert({
  title = "Heads up",
  description = "This action needs your attention before it runs.",
  confirmLabel = "Proceed",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="danger"
      icon={<AlertTriangle />}
      iconClassName="text-danger"
      confirmClassName={confirmTone.danger}
      title={title}
      description={description}
      confirmLabel={confirmLabel}
      panelMotion={{
        initial: { opacity: 0, x: 0 },
        animate: { opacity: 1, x: [0, -10, 10, -8, 8, -4, 4, 0] },
        exit: { opacity: 0, x: 0 },
        transition: { duration: 0.5, ease: "easeOut" },
      }}
      {...props}
    />
  )
}

/* PopAlert: dusuk damping yay ile olceklenerek asirtili (overshoot) patlar. */
export function PopAlert({
  title = "Quick confirm",
  description = "Confirm you want to continue with this action.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="info"
      icon={<Sparkles />}
      iconClassName="text-info"
      confirmClassName={confirmTone.info}
      title={title}
      description={description}
      panelMotion={{
        initial: { opacity: 0, scale: 0.8 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.9 },
        transition: { type: "spring", stiffness: 520, damping: 12 },
      }}
      {...props}
    />
  )
}

/* DropAlert: it falls from above and settles with a spring bounce. */
export function DropAlert({
  title = "Before you continue",
  description = "Review the details, then confirm to apply the change.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="warning"
      icon={<ArrowDown />}
      iconClassName="text-warning-soft-foreground"
      confirmClassName={confirmTone.warning}
      title={title}
      description={description}
      panelMotion={{
        initial: { opacity: 0, y: -320 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -120 },
        transition: { type: "spring", stiffness: 260, damping: 20 },
      }}
      {...props}
    />
  )
}

/* ZoomAlert: agresif buyume ile ortaya patlar (scale 0.4 -> 1). */
export function ZoomAlert({
  title = "Confirm action",
  description = "This will take effect as soon as you confirm.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="success"
      icon={<Zap />}
      iconClassName="text-success"
      confirmClassName={confirmTone.success}
      title={title}
      description={description}
      panelMotion={{
        initial: { opacity: 0, scale: 0.4 },
        animate: { opacity: 1, scale: 1 },
        exit: { opacity: 0, scale: 0.4 },
        transition: { type: "spring", stiffness: 360, damping: 24 },
      }}
      {...props}
    />
  )
}

/* SlideAlert: alttan yukari kayarak girer (y 40 -> 0). */
export function SlideAlert({
  title = "One more step",
  description = "Confirm below to finish and apply your changes.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="info"
      icon={<ArrowUp />}
      iconClassName="text-info"
      confirmClassName={confirmTone.info}
      title={title}
      description={description}
      panelMotion={{
        initial: { opacity: 0, y: 44 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: 28 },
        transition: { type: "spring", stiffness: 320, damping: 26 },
      }}
      {...props}
    />
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Shake

A danger-tone alert that shakes horizontally on enter.

Pop

Pops in with a spring overshoot as it scales up.

Drop

Drops in from the top and bounces into place.

Zoom

Bursts in with an aggressive zoom.

Slide

Slides up from the bottom into place.

ai2 Motion alert dialogs: 5 styled variations on the token system

The ai2 Motion alert dialogs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around self-contained confirmation dialogs with showy entrances. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion animates a distinct horizontal shake, spring pop, top drop, zoom or bottom slide on enter and exit; the backdrop fades. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transforms are skipped and the dialog fades instead.

What is in the ai2 Motion alert dialogs?

5 exports in one file: Shake, Pop, Drop, Zoom and Slide. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion animates a distinct horizontal shake, spring pop, top drop, zoom or bottom slide on enter and exit; the backdrop fades.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the dialog fades instead.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Motion alert dialogs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.