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

Badge tabs

Five tab groups whose tabs carry a count or a status: numeric pills, status dots, soft status labels, icon plus count, and danger or warning alerts. Each is self-contained, sized, token-driven and keyboard accessible with role tablist and arrow key navigation.

TabsBadge

Installation

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

Run the following command

npx shadcn@latest add @ai2/tabs-badge

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

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/tabs-badge.tsx

"use client"

import * as React from "react"
import { AlertTriangle, Inbox, LayoutGrid, MessageSquare, Users } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

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

/* Badge tabs family: 5 tab strips where every tab carries a count or a status badge.
   Count numbers, dots, status labels, an icon + badge and a warning badge.
   Each export is a complete tabs component - internal active-tab state,
   role="tablist"/role="tab" and a role="tabpanel" panel. The badge text is part of
   the tab's accessible name; it is also visual. The ids are produced with
   React.useId(). Color comes ONLY from tokens, via alpha color-mix. The indicator
   slides with a framer-motion layoutId; it switches instantly under reduced
   motion. */

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

type TabItem = {
  value: string
  label: React.ReactNode
  panel: React.ReactNode
  badge?: React.ReactNode
}

type TabsProps = {
  className?: string
  size?: StyledSize
  tabs?: TabItem[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
}

const sizeTab: Record<StyledSize, string> = {
  sm: "h-8 px-3 text-xs",
  md: "h-9 px-4 text-sm",
  lg: "h-10 px-5 text-sm",
  xl: "h-11 px-6 text-base",
}

const tabBase =
  "relative z-10 inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&>svg]:shrink-0 [&_i]:text-base [&_i]:leading-none [&>i]:shrink-0"

const panelBase =
  "rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"

const countPill =
  "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[0.6875rem] font-semibold leading-none tabular-nums"

const dot = "size-1.5 shrink-0 rounded-full"

const statusPill =
  "inline-flex h-5 items-center justify-center rounded-full px-2 text-[0.6875rem] font-semibold leading-none"

function useTabsState(props: TabsProps, fallback: TabItem[]) {
  const { tabs, value, defaultValue, onValueChange } = props
  const list = React.useMemo(() => (tabs && tabs.length ? tabs : fallback), [tabs, fallback])
  const [internal, setInternal] = React.useState<string>(() => defaultValue ?? list[0]?.value ?? "")
  const active = value ?? internal
  const refs = React.useRef<(HTMLButtonElement | null)[]>([])
  const select = React.useCallback(
    (v: string) => {
      if (value === undefined) setInternal(v)
      onValueChange?.(v)
    },
    [value, onValueChange]
  )
  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return
    e.preventDefault()
    const idx = list.findIndex((t) => t.value === active)
    const dir = e.key === "ArrowRight" ? 1 : -1
    const ni = (idx + dir + list.length) % list.length
    select(list[ni].value)
    refs.current[ni]?.focus()
  }
  return { list, active, select, refs, onKeyDown }
}

function useSlide() {
  const reduce = useReducedMotion()
  return reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 420, damping: 34 }
}

type BadgeConfig = {
  fallback: TabItem[]
  bar: string
  tab: string
  indicator: string
  active: string
  inactive: string
}

/* Shared shell: badged tabs plus a sliding indicator plus panel. */
function BadgeTabsShell({ props, config }: { props: TabsProps; config: BadgeConfig }) {
  const { className, size = "md" } = props
  const { list, active, select, refs, onKeyDown } = useTabsState(props, config.fallback)
  const uid = React.useId()
  const transition = useSlide()
  const current = list.find((t) => t.value === active) ?? list[0]

  return (
    <div data-slot="styled-tabs" className={cn("flex flex-col gap-3", className)}>
      {/* 200% text (WCAG 1.4.4): the strip is `w-fit`, so growing text widened
          the page. Scrolling was moved inside the strip itself; the wrapper is
          REQUIRED because `overflow-x-auto` clips vertically too and the focus
          ring would be cut off. The `-m-1 p-1` pair opens room for the ring and
          preserves the outer measurements. The same fix is documented in detail
          in registry/ai2/ui/tabs.tsx. */}
      <div
        data-slot="styled-tabs-viewport"
        className="-m-1 flex max-w-full overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        <div
          role="tablist"
          aria-orientation="horizontal"
          onKeyDown={onKeyDown}
          className={cn("inline-flex w-fit items-center gap-1", config.bar)}
        >
          {list.map((tab, i) => {
            const on = tab.value === active
            return (
              <button
                key={tab.value}
                ref={(el) => {
                  refs.current[i] = el
                }}
                type="button"
                role="tab"
                id={`${uid}-tab-${tab.value}`}
                aria-selected={on}
                aria-controls={`${uid}-panel-${tab.value}`}
                tabIndex={on ? 0 : -1}
                onClick={() => select(tab.value)}
                className={cn(tabBase, sizeTab[size], config.tab, on ? config.active : config.inactive)}
              >
                {on ? (
                  <motion.span
                    layoutId={`${uid}-badge-indicator`}
                    transition={transition}
                    className={cn("absolute -z-10", config.indicator)}
                  />
                ) : null}
                {tab.label}
                {tab.badge}
              </button>
            )
          })}
        </div>
      </div>
      {current ? (
        <div
          role="tabpanel"
          id={`${uid}-panel-${current.value}`}
          aria-labelledby={`${uid}-tab-${current.value}`}
          tabIndex={0}
          className={panelBase}
        >
          {current.panel}
        </div>
      ) : null}
    </div>
  )
}

const COUNT_TABS: TabItem[] = [
  {
    value: "inbox",
    label: "Inbox",
    badge: <span className={cn(countPill, "bg-primary text-primary-foreground")}>12</span>,
    panel: "Twelve unread threads are waiting in the shared inbox.",
  },
  {
    value: "drafts",
    label: "Drafts",
    badge: <span className={cn(countPill, "bg-muted text-muted-foreground")}>4</span>,
    panel: "Four drafts have not been sent yet.",
  },
  {
    value: "archive",
    label: "Archive",
    badge: <span className={cn(countPill, "bg-muted text-muted-foreground")}>96</span>,
    panel: "Everything that has been resolved and filed away.",
  },
]

/* Count: her sekmede sayisal rozet, aktif sekmede primary pill. */
export function CountTabs(props: TabsProps) {
  return (
    <BadgeTabsShell
      props={props}
      config={{
        fallback: COUNT_TABS,
        bar: "rounded-lg bg-muted p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md border border-border bg-background shadow-sm",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

const DOT_TABS: TabItem[] = [
  {
    value: "running",
    label: <><span className={cn(dot, "bg-success")} aria-hidden="true" /> Running</>,
    panel: "Three jobs are running right now.",
  },
  {
    value: "queued",
    label: <><span className={cn(dot, "bg-warning")} aria-hidden="true" /> Queued</>,
    panel: "Jobs waiting for a free worker.",
  },
  {
    value: "failed",
    label: <><span className={cn(dot, "bg-danger")} aria-hidden="true" /> Failed</>,
    panel: "Jobs that stopped with an error and can be retried.",
  },
]

/* Dot: etiketin onunde token renkli durum noktasi. */
export function DotTabs(props: TabsProps) {
  return (
    <BadgeTabsShell
      props={props}
      config={{
        fallback: DOT_TABS,
        bar: "border-b border-border",
        tab: "-mb-px rounded-t-md",
        indicator: "inset-x-0 -bottom-px h-0.5 rounded-full bg-primary",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

const STATUS_TABS: TabItem[] = [
  {
    value: "live",
    label: "Live",
    badge: <span className={cn(statusPill, "bg-success-soft text-success-soft-foreground")}>OK</span>,
    panel: "The published version that visitors are seeing.",
  },
  {
    value: "staging",
    label: "Staging",
    badge: <span className={cn(statusPill, "bg-warning-soft text-warning-soft-foreground")}>Build</span>,
    panel: "The preview build waiting for review.",
  },
  {
    value: "draft",
    label: "Draft",
    badge: <span className={cn(statusPill, "bg-muted text-muted-foreground")}>Idle</span>,
    panel: "Work in progress that has never been deployed.",
  },
]

/* Status: sekme basina metinli durum rozeti (soft token tonlari). */
export function StatusTabs(props: TabsProps) {
  return (
    <BadgeTabsShell
      props={props}
      config={{
        fallback: STATUS_TABS,
        bar: "rounded-lg border border-border bg-card p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md bg-[color-mix(in_oklab,var(--color-foreground)_7%,transparent)]",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

const ICON_BADGE_TABS: TabItem[] = [
  {
    value: "inbox",
    label: <><Inbox /> Inbox</>,
    badge: <span className={cn(countPill, "bg-primary text-primary-foreground")}>8</span>,
    panel: "Eight unread threads are waiting in the shared inbox.",
  },
  {
    value: "comments",
    label: <><MessageSquare /> Comments</>,
    badge: <span className={cn(countPill, "bg-muted text-muted-foreground")}>23</span>,
    panel: "Comments left on documents you follow.",
  },
  {
    value: "team",
    label: <><Users /> Team</>,
    badge: <span className={cn(countPill, "bg-muted text-muted-foreground")}>6</span>,
    panel: "Six people have access to this workspace.",
  },
]

/* IconBadge: ikon + etiket + sayi rozeti, primary tintli aktif gosterge. */
export function IconBadgeTabs(props: TabsProps) {
  return (
    <BadgeTabsShell
      props={props}
      config={{
        fallback: ICON_BADGE_TABS,
        bar: "inline-flex items-center gap-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

const ALERT_TABS: TabItem[] = [
  {
    value: "overview",
    label: <><LayoutGrid /> Overview</>,
    panel: "A summary of the workspace: recent activity, open items and the team.",
  },
  {
    value: "issues",
    label: <><AlertTriangle /> Issues</>,
    badge: <span className={cn(countPill, "bg-danger text-danger-foreground")}>3</span>,
    panel: "Three checks are failing and need attention.",
  },
  {
    value: "warnings",
    label: "Warnings",
    badge: <span className={cn(countPill, "bg-warning-soft text-warning-soft-foreground")}>7</span>,
    panel: "Seven non-blocking warnings from the last run.",
  },
]

/* Alert: dikkat isteyen sekmeler danger / warning rozetiyle one cikar. */
export function AlertTabs(props: TabsProps) {
  return (
    <BadgeTabsShell
      props={props}
      config={{
        fallback: ALERT_TABS,
        bar: "rounded-lg border border-border bg-muted p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md border border-border bg-background shadow-sm",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

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.

Count

Each tab carries a numeric count pill.

Twelve unread threads are waiting in the shared inbox.

Dot

A token status dot sits before each label.

Three jobs are running right now.

Status

Each tab carries a soft-tone status label.

The published version that visitors are seeing.

Icon badge

Icon, label and count on every tab.

Eight unread threads are waiting in the shared inbox.

Alert

Tabs that need attention carry a danger or warning badge.

A summary of the workspace: recent activity, open items and the team.

ai2 Badge tabs: 5 styled variations on the token system

The ai2 Badge tabs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around tab groups whose tabs carry counts or status badges. 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 active indicator with a layoutId spring. 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 active tab with no animation.

What is in the ai2 Badge tabs?

5 exports in one file: Count, Dot, Status, Icon badge and Alert. 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 active indicator with a layoutId spring.
Reduced-motion aware: Under prefers-reduced-motion, the indicator jumps to the active tab with no animation.
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 Badge tabs 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.