Are the ai2 Accent 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.

Accent alert dialogs

Five accent alert dialogs: top bar, side bar, ring, glow and fill. Each is self-contained (no radix), sized, driven by a token accent color, and closes on backdrop click or Escape.

Alert dialogAccent

Installation

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

Run the following command

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

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

"use client"

import * as React from "react"
import { Droplet, Focus, PanelLeft, PanelTop, Sparkles } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Accent alert-dialog family: 5 confirmation modals with a token accent colour.
   Every export is a complete modal and SELF-CONTAINED (no radix, no portal): a
   fixed backdrop plus a centred fixed panel. A backdrop click, Escape or Cancel
   closes it; Confirm calls onConfirm first and then closes. The panel takes
   focus on open. AnimatePresence enter/exit, only a fade under reduced motion.
   Colour comes ONLY from tokens; transparency ONLY through
   color-mix(in oklab, var(--color-x) N%, transparent). The accent colour is the
   primary token; the variants apply that accent to a DIFFERENT part of the
   panel: a top strip, a left vertical bar, a ring box-shadow, a glow box-shadow,
   a soft fill. */

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

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",
}

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"

/* The confirm button is painted with the accent (primary) token. */
const confirmBtn =
  "inline-flex h-9 items-center justify-center gap-1.5 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 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 & {
  /** Panelin cerceve / box-shadow / dolgu aksan siniflari. */
  panelClassName?: string
  /** The decorative layer added inside the panel (a top strip, a left bar and so on). */
  accent?: React.ReactNode
  icon: React.ReactNode
}

/* Ortak modal cekirdegi: durum yonetimi, backdrop, panel, escape, odak, motion. */
function AccentAlertDialog({
  size = "md",
  trigger,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  className,
  open,
  defaultOpen,
  onOpenChange,
  panelClassName,
  accent,
  icon,
}: 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 relative w-full overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none",
                  panelWidth[size],
                  panelClassName,
                  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" }}
              >
                {accent}
                <div className={cn("flex gap-3", bodyPad[size])}>
                  <span
                    data-slot="styled-alert-dialog-icon"
                    className="mt-0.5 flex shrink-0 items-center text-primary [&_svg]:size-5 [&_svg]:shrink-0 [&_i]:text-xl [&_i]:leading-none"
                  >
                    {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("flex justify-end gap-2 pt-0", bodyPad[size])}
                >
                  <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={confirmBtn}
                    onClick={handleConfirm}
                  >
                    {confirmLabel}
                  </button>
                </div>
              </motion.div>
            </div>
          </>
        ) : null}
      </AnimatePresence>
    </span>
  )
}

/* TopBarAlert: a full-width primary token accent strip above the panel (h-1). */
export function TopBarAlert({
  title = "Confirm this action",
  description = "A token accent runs across the top of the panel.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <AccentAlertDialog
      icon={<PanelTop />}
      title={title}
      description={description}
      accent={
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-primary"
        />
      }
      {...props}
    />
  )
}

/* SideBarAlert: panelin solunda dikey primary token aksan cubuk (w-1). */
export function SideBarAlert({
  title = "Confirm this action",
  description = "A token accent bar runs down the left edge of the panel.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <AccentAlertDialog
      icon={<PanelLeft />}
      title={title}
      description={description}
      accent={
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-y-0 left-0 w-1 bg-primary"
        />
      }
      {...props}
    />
  )
}

/* RingAlert: panel etrafinda cift halka. Border + iki azalan yogunlukta primary
   token box-shadow cizgisi (color-mix ile). */
export function RingAlert({
  title = "Confirm this action",
  description = "A token ring wraps the panel with a soft outer halo.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <AccentAlertDialog
      icon={<Focus />}
      title={title}
      description={description}
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_40%,transparent)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--color-primary)_45%,transparent),0_0_0_5px_color-mix(in_oklab,var(--color-primary)_18%,transparent)]"
      {...props}
    />
  )
}

/* GlowAlert: panel etrafinda genis, dusuk yogunluklu primary token glow. */
export function GlowAlert({
  title = "Confirm this action",
  description = "A soft token glow radiates from behind the panel.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <AccentAlertDialog
      icon={<Sparkles />}
      title={title}
      description={description}
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_35%,transparent)] shadow-[0_0_45px_color-mix(in_oklab,var(--color-primary)_28%,transparent),0_0_0_1px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]"
      {...props}
    />
  )
}

/* FillAlert: the panel background is a light primary token soft fill (mixed over
   popover with color-mix), plus a thin accent border. */
export function FillAlert({
  title = "Confirm this action",
  description = "The panel surface carries a faint token fill.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <AccentAlertDialog
      icon={<Droplet />}
      title={title}
      description={description}
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-primary)_6%,var(--color-popover))]"
      {...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.

Top bar

A token accent strip across the top edge of the panel.

Side bar

A vertical token accent bar down the left edge.

Ring

A token ring around the panel via layered box-shadow.

Glow

A soft token glow shadow behind the panel.

Fill

A faint token fill on the panel surface.

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

The ai2 Accent 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 token accent treatments on the panel. 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 fades and scales the panel in at the center; 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 Accent alert dialogs?

5 exports in one file: Top bar, Side bar, Ring, Glow and Fill. 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 fades and scales the panel in at the center; 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 Accent 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.