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

Styled breadcrumb

Five breadcrumb treatments: slash, chevron, pill, arrow and dot. Each is sized, token-driven and marks the current page with aria-current.

NavigationBreadcrumb

Installation

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

Run the following command

npx shadcn@latest add @ai2/breadcrumb-styled

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

Install dependencies

npm install lucide-react

Copy the source

components/ui/breadcrumb-styled.tsx

"use client"

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

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

/* Breadcrumb family: 5 decorative trails. Colour comes ONLY from tokens (alpha via color-mix), the size is a text scale plus gap. The last item is the current page (aria-current), not a link; the others are token links carrying a focus-visible ring. 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 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-primary 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"

/* Slash: slash separators. */
export function SlashBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {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">
                  <Slash />
                </span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Chevron: ok-basi ayraclar, ilk oge ev ikonu. */
export function ChevronBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-2">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {i === 0 && <Home aria-hidden="true" />}
                  {item.label}
                </a>
              )}
              {!last && (
                <span className={sep} aria-hidden="true">
                  <ChevronRight />
                </span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

const pillBox: Record<StyledSize, string> = {
  sm: "h-6 rounded-md px-2 text-xs",
  md: "h-7 rounded-md px-2.5 text-xs",
  lg: "h-8 rounded-lg px-3 text-sm",
  xl: "h-9 rounded-lg px-3.5 text-sm",
}

/* Pill: every crumb is a token chip; the current page is filled and the rest are
   transparent tokens. */
export function PillBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  const pill =
    "inline-flex items-center gap-1.5 font-medium transition-colors [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:leading-none"
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {last || !item.href ? (
                <span
                  className={cn(pill, pillBox[size], "bg-primary text-primary-foreground")}
                  aria-current="page"
                >
                  {item.label}
                </span>
              ) : (
                <a
                  href={item.href}
                  className={cn(
                    pill,
                    pillBox[size],
                    "bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                  )}
                >
                  {item.label}
                </a>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

const arrowBox: Record<StyledSize, string> = {
  sm: "h-6 pl-3 pr-2 text-xs",
  md: "h-7 pl-4 pr-2.5 text-xs",
  lg: "h-8 pl-5 pr-3 text-sm",
  xl: "h-9 pl-6 pr-3.5 text-sm",
}

/* Arrow: ileri isaret eden basamak sekilli izler (chevron kesimli). */
export function ArrowBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  const step =
    "relative inline-flex items-center font-medium transition-colors [clip-path:polygon(0_0,calc(100%-0.6rem)_0,100%_50%,calc(100%-0.6rem)_100%,0_100%,0.6rem_50%)] first:[clip-path:polygon(0_0,calc(100%-0.6rem)_0,100%_50%,calc(100%-0.6rem)_100%,0_100%)] [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:leading-none"
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], "gap-0", className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex -ml-2 first:ml-0">
              {last || !item.href ? (
                <span
                  className={cn(step, arrowBox[size], "bg-primary text-primary-foreground")}
                  aria-current="page"
                >
                  {item.label}
                </span>
              ) : (
                <a
                  href={item.href}
                  className={cn(
                    step,
                    arrowBox[size],
                    "bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                  )}
                >
                  {item.label}
                </a>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Dot: nokta ayracli minimal iz. */
export function DotBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-2">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {item.label}
                </a>
              )}
              {!last && (
                <span
                  className="size-1 rounded-full bg-muted-foreground/50"
                  aria-hidden="true"
                />
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

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.

Slash

Slash separators between crumbs.

Chevron

Chevron separators.

Pill

Each crumb is a token pill.

Arrow

Step-shaped crumbs pointing forward.

Dot

Minimal dot separators.

ai2 Styled breadcrumb: 5 styled variations on the token system

The ai2 Styled breadcrumb are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around breadcrumb trails. 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 Styled breadcrumb?

5 exports in one file: Slash, Chevron, Pill, Arrow and Dot. 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 Styled breadcrumb 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.