Are the ai2 Glass breadcrumbs free?

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

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, there is no motion to reduce.

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 breadcrumbs

Five breadcrumbs that keep the same trail and vary only the frosted container around it: a soft frost, a primary tint, dark smoke, saturated crystal and a lifted depth panel. The blur only engages where backdrop-filter is supported, so unsupported browsers fall back to a solid token surface. Each is sized, token-driven and marks the current page with aria-current.

BreadcrumbGlass

Installation

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

Run the following command

npx shadcn@latest add @ai2/breadcrumb-glass

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

Install dependencies

npm install lucide-react

Copy the source

components/ui/breadcrumb-glass.tsx

"use client"

import type * as React from "react"
import { ChevronRight } from "lucide-react"

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

/* Glass breadcrumb family: 5 frosted-glass containers. The trail and the
   separator are always the same; what changes is the surface carrying the trail
   (soft frost, info tint, dark smoke, sharp crystal, layered depth). The glass is
   NO LONGER hand-written: every variant derives from the glassDepth scale inside
   @ai2/glass, so the ai2 signature (top inset highlight + soft ambient shadow)
   speaks the same language in every variant.

   Choosing the depth (a bar-shaped control): a breadcrumb is wide but SHORT
   (h-8..h-12) and sits in the page flow. Behind a 36px bar a heavy blur gains
   almost nothing, so the scale starts LOW; only the variants that genuinely
   "float" move up. See the note above each variant.

   Color comes ONLY from tokens (via alpha color-mix), size covers the text scale
   + gap + padding. The last item is the current page (aria-current), not a link.
   Deterministic, no motion. */

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

type Crumb = { label: React.ReactNode; href?: string }

type Props = {
  className?: string
  size?: StyledSize
  items?: Crumb[]
}

const trail: Record<StyledSize, string> = {
  sm: "gap-1.5 text-xs",
  md: "gap-2 text-sm",
  lg: "gap-2.5 text-sm",
  xl: "gap-3 text-base",
}

const shell: Record<StyledSize, string> = {
  sm: "h-8 rounded-lg px-2.5",
  md: "h-9 rounded-lg px-3",
  lg: "h-10 rounded-xl px-3.5",
  xl: "h-12 rounded-xl px-4",
}

const defaultItems: Crumb[] = [
  { label: "Home", href: "#" },
  { label: "Components", href: "#" },
  { label: "Button" },
]

const link =
  "inline-flex items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const current =
  "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const sep =
  "flex items-center text-muted-foreground/60 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none"

/* Shared shell: glassClassName carries each variant's glass technique. */
function GlassTrail({
  className,
  size = "md",
  items,
  glassClassName,
}: Props & { items: Crumb[]; glassClassName: string }) {
  return (
    <nav
      data-slot="styled-breadcrumb"
      aria-label="Breadcrumb"
      className={cn("inline-flex max-w-full", shell[size], glassClassName, className)}
    >
      <ol className={cn("flex flex-nowrap items-center", trail[size])}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-1.5 whitespace-nowrap">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {item.label}
                </a>
              )}
              {!last && (
                <span className={sep} aria-hidden="true">
                  <ChevronRight />
                </span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Frost: light frost. DEPTH sm (4px): the plainest variant, where softening the content behind the crumb slightly is enough; more would be wasted on a short bar. */
export function FrostBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <GlassTrail
      className={className}
      size={size}
      items={items}
      glassClassName={cn(
        glassDepth.sm,
        "items-center border border-[color-mix(in_oklab,var(--color-border)_70%,transparent)]"
      )}
    />
  )
}

/* Tint: info-toned glass. DEPTH md (8px, the canonical default): the character is carried by the TONE, not the blur, so it stays on the scale's default step. Note: the tint has to override both the bg-* and the supports-[backdrop-filter]:bg-* step; writing only one leaves the other standing and the tone becomes invisible. */
export function TintBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <GlassTrail
      className={className}
      size={size}
      items={items}
      glassClassName={cn(
        glassDepth.md,
        "items-center border border-[color-mix(in_oklab,var(--color-info)_22%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]"
      )}
    />
  )
}

/* Smoke: dark smoke. DEPTH md (8px): DELIBERATELY the same step as Tint, because both are glass sitting at the same distance in the page flow; the difference is tone (foreground smoke versus info), not floating height. */
export function SmokeBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <GlassTrail
      className={className}
      size={size}
      items={items}
      glassClassName={cn(
        glassDepth.md,
        "items-center border border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"
      )}
    />
  )
}

/* Crystal: sharp glass. DEPTH lg (16px): its only character is being a clear
   PANEL, which means the diffusion itself; here the blur is the subject, not
   decoration.
   Note: the old `shadow-[inset_0_1px_0_0_...]` was removed - glassDepth already
   carries a [box-shadow:...] and a second shadow would silently drop the
   signature; the bright top edge is now drawn with border-t. A gradient removes
   the bg-* step but does NOT remove the supports-* step, so it is explicitly
   pulled back to bg-transparent. */
export function CrystalBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <GlassTrail
      className={className}
      size={size}
      items={items}
      glassClassName={cn(
        glassDepth.lg,
        "items-center border border-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]",
        "border-t-[color-mix(in_oklab,var(--color-background)_85%,transparent)]",
        "bg-gradient-to-b supports-[backdrop-filter]:bg-transparent",
        "from-[color-mix(in_oklab,var(--color-background)_75%,transparent)]",
        "to-[color-mix(in_oklab,var(--color-background)_45%,transparent)]",
        "supports-[backdrop-filter]:backdrop-saturate-150"
      )}
    />
  )
}

/* Depth: layered depth. DEPTH xl (24px): the ONLY variant that earns the top of the scale, because this bar really does read as an overlay lifted off the page - the further from the surface, the more what is behind scatters. Note: the old `shadow-lg` was removed (it overrides the signature); the extra body separation now comes from a ring - a ring does not join the box-shadow group, so the signature survives. */
export function DepthBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <GlassTrail
      className={className}
      size={size}
      items={items}
      glassClassName={cn(
        glassDepth.xl,
        "items-center border border-[color-mix(in_oklab,var(--color-border)_60%,transparent)]",
        "ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"
      )}
    />
  )
}

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 surface with a small blur and a thin border.

Tint

Primary-tinted glass; the surface and border share one tone.

Smoke

A dark smoked panel with a strong blur.

Crystal

Saturated glass with a bright top edge.

Depth

A heavy blur lifted off the page by a drop shadow.

ai2 Glass breadcrumbs: 5 styled variations on the token system

The ai2 Glass breadcrumbs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around breadcrumb trails inside a frosted glass container. 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: these are static; no motion library work is required. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, there is no motion to reduce.

What is in the ai2 Glass breadcrumbs?

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: these are static; no motion library work is required.
Reduced-motion aware: Under prefers-reduced-motion, there is no motion to reduce.
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 breadcrumbs 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.