Are the ai2 Styled alert dialog 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.

Styled alert dialog

Five confirmation dialogs: confirm, destructive, info, success and icon. Each is self-contained (no radix), sized, driven by a tone token, and closes on backdrop click or Escape.

OverlaysAlert dialog

Installation

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

Run the following command

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

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-styled.tsx

"use client"

import * as React from "react"
import { AlertTriangle, CheckCircle, Info, Trash2 } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Styled alert-dialog family: 5 decorative confirmation modals. Each export is a
   complete modal: internal open state (uncontrolled defaultOpen / controlled
   open+onOpenChange), SELF-CONTAINED (no radix, no portal) - fixed backdrop +
   centered fixed panel. A backdrop click, Escape or Cancel closes it; Confirm
   calls onConfirm first and then closes. The panel takes focus on open.
   AnimatePresence handles enter/exit, and under reduced motion it fades or
   switches instantly. 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"

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
  centered?: boolean
}

/* Ortak modal cekirdegi: durum yonetimi, backdrop, panel, escape, odak, motion. */
function StyledAlertDialog({
  size = "md",
  trigger,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  className,
  open,
  defaultOpen,
  onOpenChange,
  tone,
  confirmClassName,
  icon,
  iconClassName,
  centered = false,
}: 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)
  }

  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={reduce ? false : { opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={reduce ? { opacity: 1 } : { 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={reduce ? false : { opacity: 0, scale: 0.96, y: 8 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.96, y: 8 }}
                transition={{ duration: 0.2, ease: "easeOut" }}
              >
                <div
                  data-tone={tone}
                  className={cn("flex flex-col", bodyPad[size])}
                >
                  {centered ? (
                    <div className="flex flex-col items-center text-center">
                      <span
                        data-slot="styled-alert-dialog-icon"
                        className={cn(
                          "mb-3 flex size-12 items-center justify-center rounded-full bg-[color-mix(in_oklab,currentColor_12%,transparent)] [&_svg]:size-6 [&_svg]:shrink-0 [&_i]:text-2xl [&_i]:leading-none",
                          iconClassName
                        )}
                      >
                        {icon}
                      </span>
                      {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 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={cn(
                      "mt-5 flex gap-2",
                      centered
                        ? "flex-col-reverse sm:flex-row sm:justify-center"
                        : "justify-end"
                    )}
                  >
                    <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>
  )
}

/* ConfirmAlert: notr onay, primary confirm butonu. Genel amacli evet/hayir. */
export function ConfirmAlert({
  title = "Are you sure?",
  description = "Please confirm you want to continue with this action.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="info"
      icon={<Info />}
      iconClassName="text-foreground"
      confirmClassName="bg-primary text-primary-foreground hover:bg-primary/90"
      title={title}
      description={description}
      {...props}
    />
  )
}

/* DestructiveAlert: the danger tone, a Trash icon plus a danger confirm button. For irreversible delete flows. */
export function DestructiveAlert({
  title = "Delete this item?",
  description = "This action cannot be undone. The item will be permanently removed.",
  confirmLabel = "Delete",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="danger"
      icon={<Trash2 />}
      iconClassName="text-danger"
      confirmClassName={confirmTone.danger}
      title={title}
      description={description}
      confirmLabel={confirmLabel}
      {...props}
    />
  )
}

/* InfoAlert: info tone + Info ikonu. Bilgilendirici onay. */
export function InfoAlert({
  title = "Heads up",
  description = "Review the details below before you continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="info"
      icon={<Info />}
      iconClassName="text-info"
      confirmClassName={confirmTone.info}
      title={title}
      description={description}
      {...props}
    />
  )
}

/* SuccessAlert: success tone + CheckCircle. Basari / tamamlama onayi. */
export function SuccessAlert({
  title = "All set",
  description = "Your changes have been applied. Confirm to continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="success"
      icon={<CheckCircle />}
      iconClassName="text-success"
      confirmClassName={confirmTone.success}
      title={title}
      description={description}
      {...props}
    />
  )
}

/* IconAlert: buyuk ortalanmis tone ikon, ustte; altinda ortalanmis baslik /
   aciklama, en altta butonlar. */
export function IconAlert({
  title = "Confirm action",
  description = "Take a moment to confirm before this action is applied.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <StyledAlertDialog
      tone="warning"
      icon={<AlertTriangle />}
      iconClassName="text-warning-soft-foreground"
      confirmClassName={confirmTone.warning}
      title={title}
      description={description}
      centered
      {...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.

Confirm

A neutral confirmation with a primary confirm button.

Destructive

A danger-tone confirm for destructive actions.

Info

An info-tone dialog.

Success

A success-tone dialog.

Icon

A large centered tone icon above the message.

ai2 Styled alert dialog: 5 styled variations on the token system

The ai2 Styled alert dialog are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around confirmation dialogs. 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 the 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 or shows instantly.

What is in the ai2 Styled alert dialog?

5 exports in one file: Confirm, Destructive, Info, Success and Icon. 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 the enter and exit; the backdrop fades.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and the dialog fades or shows instantly.
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 Styled alert dialog 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.