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

Five frosted radio groups that keep one visual language and vary only the glass: a light frost, a primary tint, a smoky surface, a crystal sheen and a layered depth. Each is self-contained, sized, token-driven and keyboard accessible with role radiogroup.

Radio groupGlass

Installation

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

Run the following command

npx shadcn@latest add @ai2/radio-group-glass

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

Install dependencies

npm install motion

Copy the source

components/ui/radio-group-glass.tsx

"use client"

import * as React from "react"
import { motion, useReducedMotion } from "motion/react"

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

/* Glass radio-group family: 5 frosted-glass selection groups. The glass is NO
   LONGER hand-written: the container surface derives from the glassDepth scale
   inside @ai2/glass, so the ai2 signature (top inset highlight + ambient shadow)
   speaks the same language in every variant.

   Choosing the depth (a bar-shaped control): a segmented group is wide but SHORT
   and sits in the page flow; behind a short bar a heavy blur brings no gain, so the
   scale starts low and only the genuinely floating variant reaches the top.

   NO GLASS ON GLASS (it used to be that way, now fixed): the container and the
   sliding marker each used to carry their own backdrop-blur - with two layers of
   glass on top of each other the image turned to mud. The glass is now ONLY on the
   bar; the selected marker is an OPAQUE highlight on top of it (with no blur of its
   own). Since the marker does not carry glassDepth, using shadow-* on it is safe.

   role="radiogroup" + role="radio", roving tabindex, arrow-key navigation and
   selection. Color comes ONLY from tokens, via alpha color-mix. The layoutId is
   unique per instance via useId. Under reduced-motion the marker jumps instantly.
   Renders with no props too. */

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

type RadioOption = { value: string; label: React.ReactNode }

interface RadioGroupProps {
  className?: string
  size?: StyledSize
  options?: RadioOption[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
}

const DEFAULT_OPTIONS: RadioOption[] = [
  { value: "a", label: "Option A" },
  { value: "b", label: "Option B" },
  { value: "c", label: "Option C" },
]

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-base",
  xl: "text-lg",
}

const padSize: Record<StyledSize, string> = {
  sm: "px-2.5 py-1",
  md: "px-3 py-1.5",
  lg: "px-4 py-2",
  xl: "px-5 py-2.5",
}

function useRadioGroup(props: Pick<RadioGroupProps, "value" | "defaultValue" | "onValueChange" | "options">) {
  const { value, defaultValue, onValueChange, options } = props
  const opts = options && options.length > 0 ? options : DEFAULT_OPTIONS
  const reduce = useReducedMotion()
  const [internal, setInternal] = React.useState(defaultValue ?? opts[0]?.value)
  const selected = value ?? internal
  const select = React.useCallback(
    (v: string) => {
      if (value === undefined) setInternal(v)
      onValueChange?.(v)
    },
    [value, onValueChange]
  )
  const spring = reduce
    ? { duration: 0 }
    : ({ type: "spring" as const, stiffness: 500, damping: 34 })
  return { opts, selected, select, reduce, spring }
}

/* Arrow-key navigation + selection (together with the roving tabindex). */
function useRadioKeys(opts: RadioOption[], select: (v: string) => void) {
  const refs = React.useRef<(HTMLButtonElement | null)[]>([])
  const setRef = (i: number) => (el: HTMLButtonElement | null) => {
    refs.current[i] = el
  }
  const onKeyDown = (i: number) => (e: React.KeyboardEvent) => {
    const last = opts.length - 1
    let next = -1
    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = i === last ? 0 : i + 1
    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = i === 0 ? last : i - 1
    if (next < 0) return
    e.preventDefault()
    const target = opts[next]
    if (!target) return
    select(target.value)
    refs.current[next]?.focus()
  }
  return { setRef, onKeyDown }
}

const focusRing =
  "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"

/* Shared shell: a frosted container plus a sliding frosted indicator. The variant difference lives only in surfaceClass / indicatorClass. */
function GlassShell({
  props,
  surfaceClass,
  indicatorClass,
  activeText = "text-foreground",
}: {
  props: RadioGroupProps
  surfaceClass: string
  indicatorClass: string
  activeText?: string
}) {
  const { className, size = "md", options, value, defaultValue, onValueChange } = props
  const { opts, selected, select, spring } = useRadioGroup({ options, value, defaultValue, onValueChange })
  const { setRef, onKeyDown } = useRadioKeys(opts, select)
  const groupId = React.useId()
  const activeIndex = opts.findIndex((o) => o.value === selected)

  return (
    <div
      data-slot="styled-radio-group"
      role="radiogroup"
      aria-label="Choose an option"
      className={cn("inline-flex items-center gap-1 rounded-xl p-1", surfaceClass, className)}
    >
      {opts.map((opt, i) => {
        const active = opt.value === selected
        const roving = active || (activeIndex < 0 && i === 0)
        return (
          <button
            key={opt.value}
            ref={setRef(i)}
            type="button"
            role="radio"
            aria-checked={active}
            tabIndex={roving ? 0 : -1}
            onKeyDown={onKeyDown(i)}
            onClick={() => select(opt.value)}
            data-slot="styled-radio-item"
            className={cn(
              "relative z-10 cursor-pointer rounded-lg font-medium transition-colors",
              focusRing,
              textSize[size],
              padSize[size],
              active ? activeText : "text-muted-foreground hover:text-foreground"
            )}
          >
            {active ? (
              <motion.span
                layoutId={`glass-radio-${groupId}`}
                transition={spring}
                className={cn("absolute inset-0 -z-10 rounded-lg", indicatorClass)}
              />
            ) : null}
            <span className="relative">{opt.label}</span>
          </button>
        )
      })}
    </div>
  )
}

/* Frost: a lightly frosted surface. DEPTH sm (4px): the plainest group; behind a short segmented bar anything more is an invisible cost. The marker: an opaque background chip (NO blur - the glass lives only in the bar). */
export function FrostRadio(props: RadioGroupProps) {
  return (
    <GlassShell
      props={props}
      surfaceClass={cn(
        glassDepth.sm,
        "border border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"
      )}
      indicatorClass="border border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)] bg-background shadow-sm"
    />
  )
}

/* Tint: an info-toned frosted surface. DEPTH md (8px, the canonical default): the character comes from the TONE, not the blur. Tint overrides both the bg-* and the supports-* step. The marker: an OPAQUE mix of info and background; text-primary (the semantic role of the active state) reads clearly on top of it. */
export function TintRadio(props: RadioGroupProps) {
  return (
    <GlassShell
      props={props}
      activeText="text-primary"
      surfaceClass={cn(
        glassDepth.md,
        "border border-[color-mix(in_oklab,var(--color-info)_18%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_8%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_8%,transparent)]"
      )}
      indicatorClass="border border-[color-mix(in_oklab,var(--color-info)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_16%,var(--color-background))] shadow-sm"
    />
  )
}

/* Smoke: a smoky surface. DEPTH md (8px): DELIBERATELY the same step as Tint - glass at the same distance, the difference being tone only (foreground smoke versus info). The marker: a bright opaque chip cutting through the smoke. */
export function SmokeRadio(props: RadioGroupProps) {
  return (
    <GlassShell
      props={props}
      surfaceClass={cn(
        glassDepth.md,
        "border border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)]"
      )}
      indicatorClass="bg-background shadow-sm"
    />
  )
}

/* Crystal: a clear pane. DEPTH lg (16px): diffusion is the SUBJECT here, not decoration. The gradient removes the bg-* step but does NOT remove the supports-* step, which is why it is explicitly pulled to bg-transparent. The marker: an opaque chip plus a bright top edge. */
export function CrystalRadio(props: RadioGroupProps) {
  return (
    <GlassShell
      props={props}
      surfaceClass={cn(
        glassDepth.lg,
        "border border-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]",
        "bg-gradient-to-b supports-[backdrop-filter]:bg-transparent",
        "from-[color-mix(in_oklab,var(--color-background)_50%,transparent)]",
        "to-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)]",
        "supports-[backdrop-filter]:backdrop-saturate-150"
      )}
      indicatorClass="border border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] border-t-[color-mix(in_oklab,var(--color-background)_85%,transparent)] bg-background shadow-sm"
    />
  )
}

/* Depth: layered depth. DEPTH xl (24px): the ONLY variant that earns the top of the scale - the bar reads like a recessed bed with the indicator floating over it; the glass furthest from the surface, with the most scattered background. Note: the `shadow-inner` on the shell was removed - it would override the same CSS property as the glassDepth signature. The sense of depth now comes from the floating indicator's shadow-lg (the indicator carries no glassDepth, so shadow-* is safe there). */
export function DepthRadio(props: RadioGroupProps) {
  return (
    <GlassShell
      props={props}
      surfaceClass={cn(
        glassDepth.xl,
        "border border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_7%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_7%,transparent)]"
      )}
      indicatorClass="border border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] bg-background shadow-lg"
    />
  )
}

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 light frosted track with a bright glass indicator.

Tint

A primary-tinted glass track and indicator.

Smoke

A smoky translucent track with a strong blur.

Crystal

A high-blur track with a bright top sheen.

Depth

A layered shadow that floats the frosted indicator.

ai2 Glass radio groups: 5 styled variations on the token system

The ai2 Glass radio groups are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around frosted single-choice selection controls with a translucent track. 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 slides the frosted indicator to the selected option. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the indicator jumps to the selected option instantly.

What is in the ai2 Glass radio groups?

5 exports in one file: Frost, Tint, Smoke, Crystal and Depth. 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 slides the frosted indicator to the selected option.
Reduced-motion aware: Under prefers-reduced-motion, the indicator jumps to the selected option 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 radio groups 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.