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

Glass alert dialogs

Five confirmation dialogs whose panel is frosted glass: a neutral frost, a primary tint, a dark smoky glass, a strong blur and a crystal panel with an inset highlight. Each is self-contained (no radix), sized, driven by a tone token, and closes on backdrop click or Escape.

Alert dialogGlass

Installation

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

Run the following command

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

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

"use client"

import * as React from "react"
import { Gem, MoonStar, Snowflake, Sparkles, Wind } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass alert-dialog family: 5 frosted-glass confirmation windows. A different
   direction from Essentials: there the panel is opaque and the difference lives
   in tone and icon; here the panel ITSELF is frosted glass and the difference
   lives in the glass surface and the backdrop technique. Every export is a
   complete modal: internal state (uncontrolled defaultOpen or controlled
   open/onOpenChange), 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, translucency via color-mix. The confirm button is driven by
   the tone token (exactly the same structure as Essentials).

   The PANEL glass surface derives from the glassDepth scale in @ai2/glass
   (AGENTS.md 4.5). Because this family is a modal it sits at the top of the
   scale: a modal panel really should hide what is behind it. The shared panel
   class no longer carries shadow-lg - it is in the same tailwind-merge group as
   the glassDepth signature, and keeping it would silently drop that signature.

   The BACKDROP deliberately does NOT use glassDepth: it is a full-screen scrim,
   not a glass surface. glassDepth's inset highlight would draw a bright line
   from one edge of the screen to the other. The scrim's blur stays hand-written
   here. */

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-[color-mix(in_oklab,var(--color-border)_70%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_35%,transparent)] px-4 text-sm font-medium text-foreground transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] 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
  /* Cam panelin yuzey teknigi (translucency + backdrop-blur + kenar). */
  panelClassName: string
  /* Backdrop scrim + blur teknigi. */
  backdropClassName: string
}

/* Shared modal core: state management, backdrop, glass panel, escape, focus,
   motion. The panel and backdrop appearance change through the class each
   variant passes in; the tone/icon/confirm plumbing is identical to
   Essentials. */
function GlassAlertDialog({
  size = "md",
  trigger,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  className,
  open,
  defaultOpen,
  onOpenChange,
  tone,
  confirmClassName,
  icon,
  iconClassName,
  panelClassName,
  backdropClassName,
}: 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={cn("fixed inset-0 z-50", backdropClassName)}
              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 text-popover-foreground outline-none",
                  panelClassName,
                  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])}>
                  <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>
  )
}

/* FrostAlert: neutral frosted glass. The general-purpose glass confirmation
   window.
   Depth lg (16px): a modal wants the page behind it to be texture, not text.
   The neutral ground is left to the library (the old hand-written 68% was very
   close to popover's background/70); the character is the soft border. */
export function FrostAlert({
  title = "Confirm this action?",
  description = "A frosted panel over the page. Confirm to continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <GlassAlertDialog
      tone="info"
      icon={<Snowflake />}
      iconClassName="text-info"
      confirmClassName="bg-primary text-primary-foreground hover:bg-primary/90"
      panelClassName={cn(
        glassDepth.lg,
        "border-[color-mix(in_oklab,var(--color-border)_70%,transparent)]"
      )}
      backdropClassName="bg-[color-mix(in_oklab,var(--color-foreground)_30%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm"
      title={title}
      description={description}
      {...props}
    />
  )
}

/* TintAlert: info-tinted glass. The surface is filmed with info and the border
   takes the info tone.
   Depth md (8px): deliberately one step behind Frost - what hides the
   background here is not the blur but the info film itself. That way Tint reads
   as a separate surface next to Frost. The ground is overridden in both forms
   (with and without @supports). */
export function TintAlert({
  title = "Apply changes?",
  description = "An info-tinted glass surface. Confirm to apply.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <GlassAlertDialog
      tone="info"
      icon={<Sparkles />}
      iconClassName="text-info"
      confirmClassName="bg-primary text-primary-foreground hover:bg-primary/90"
      panelClassName={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-info)_35%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_16%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_16%,transparent)]"
      )}
      backdropClassName="bg-[color-mix(in_oklab,var(--color-info)_30%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm"
      title={title}
      description={description}
      {...props}
    />
  )
}

/* DarkAlert: dark frosted glass. A foreground-based smoky surface with a strong
   scrim. Works against foreground in both themes.
   Depth lg (16px): the old value was 16px too - it landed exactly on the scale.
   The same step as Frost, because both play the "modal" role; the smoke is what
   separates them. */
export function DarkAlert({
  title = "Proceed in the dark?",
  description = "A smoky glass panel with a heavier scrim. Confirm to continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <GlassAlertDialog
      tone="info"
      icon={<MoonStar />}
      iconClassName="text-info"
      confirmClassName={confirmTone.info}
      panelClassName={cn(
        glassDepth.lg,
        "border-[color-mix(in_oklab,var(--color-foreground)_22%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)]"
      )}
      backdropClassName="bg-[color-mix(in_oklab,var(--color-foreground)_60%,transparent)] supports-[backdrop-filter]:backdrop-blur-md"
      title={title}
      description={description}
      {...props}
    />
  )
}

/* BlurAlert: a light film where the highest blur scatters the background
   completely. Focus stays on the modal.
   Depth xl (24px): the far end of the scale - the family's only maximum-scatter
   member, which is the whole identity of this variant. The old 64px was off the
   scale; xl does the same job. */
export function BlurAlert({
  title = "Focus here for a moment",
  description = "The page behind is fully diffused. Confirm to continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <GlassAlertDialog
      tone="info"
      icon={<Wind />}
      iconClassName="text-foreground"
      confirmClassName="bg-primary text-primary-foreground hover:bg-primary/90"
      panelClassName={cn(
        glassDepth.xl,
        "border-[color-mix(in_oklab,var(--color-border)_60%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_55%,transparent)]"
      )}
      backdropClassName="bg-[color-mix(in_oklab,var(--color-foreground)_25%,transparent)] supports-[backdrop-filter]:backdrop-blur-lg"
      title={title}
      description={description}
      {...props}
    />
  )
}

/* CrystalAlert: a clear surface with a crystal edge.
   Depth md (8px): crystal means clarity, not scatter - deliberately the lowest
   step in the modal family. The old shadow-[inset...] was REMOVED: being in the
   same tailwind-merge group as the glassDepth signature, it was erasing that
   signature - the thin bright line on top is already the signature's own inset
   highlight and does not need repeating by hand. The crystal edge is driven by
   an inset ring instead (which does not touch the shadow group). */
export function CrystalAlert({
  title = "Confirm with clarity",
  description = "A crisp glass panel with a sharp inset highlight. Confirm to continue.",
  ...props
}: StyledAlertPublicProps) {
  return (
    <GlassAlertDialog
      tone="success"
      icon={<Gem />}
      iconClassName="text-primary"
      confirmClassName="bg-primary text-primary-foreground hover:bg-primary/90"
      panelClassName={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-border)_65%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-popover)_62%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-popover)_62%,transparent)]",
        "ring-1 ring-inset ring-[color-mix(in_oklab,var(--color-background)_45%,transparent)]"
      )}
      backdropClassName="bg-[color-mix(in_oklab,var(--color-foreground)_35%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm"
      title={title}
      description={description}
      {...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.

Frost

A neutral frosted panel: a translucent popover surface with a strong backdrop blur.

Tint

A primary-tinted glass surface with a matching border, for on-brand confirmations.

Dark

A smoky, foreground-based dark glass with a heavier scrim behind it.

Blur

A light film over a very strong backdrop blur that fully diffuses the page.

Crystal

A crisp glass panel with a sharp inset highlight and an inset ring edge.

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

The ai2 Glass alert dialogs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around confirmation dialogs with frosted glass panels. 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 Glass alert dialogs?

5 exports in one file: Frost, Tint, Dark, Blur and Crystal. 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 Glass 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.