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

Styled tabs

Five tab bar treatments: an underline, a pill, a segmented control, boxed tabs and icon tabs. Each is sized, token-driven and keyboard accessible with role tablist.

NavigationTabs

Installation

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

Run the following command

npx shadcn@latest add @ai2/tabs-styled

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

"use client"

import * as React from "react"
import { Activity, LayoutGrid, Settings, User } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

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

/* Tabs family: 5 decorative tab strips. Only the TAB LIST is rendered (no panel).
   role="tablist" + role="tab"/aria-selected, a roving tabIndex, and the selection
   moves with ArrowLeft/Right. Color comes ONLY from tokens. The sliding indicator
   flows with a framer-motion `layoutId`; it switches instantly under reduced-motion.
   Controlled (value) or uncontrolled (defaultValue). */

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

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

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

const DEFAULT_TABS: TabItem[] = [
  { value: "overview", label: "Overview" },
  { value: "activity", label: "Activity" },
  { value: "settings", label: "Settings" },
]

const ICON_TABS: TabItem[] = [
  { value: "overview", label: <><LayoutGrid /> Overview</> },
  { value: "activity", label: <><Activity /> Activity</> },
  { value: "account", label: <><User /> Account</> },
  { value: "settings", label: <><Settings /> Settings</> },
]

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 [&_i]:text-base [&_i]:leading-none"

function useTabsState({ tabs, value, defaultValue, onValueChange }: TabsProps, fallback: TabItem[]) {
  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", stiffness: 420, damping: 34 } as const)
}

/* Underline: a token line slides under the active tab. */
export function UnderlineTabs({ className, size = "md", ...rest }: TabsProps) {
  const { list, active, select, refs, onKeyDown } = useTabsState(rest, DEFAULT_TABS)
  const id = React.useId()
  const transition = useSlide()
  return (
    <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
        data-slot="styled-tabs"
        role="tablist"
        onKeyDown={onKeyDown}
        className={cn("inline-flex items-center gap-1 border-b border-border", className)}
      >
        {list.map((tab, i) => {
          const on = tab.value === active
          return (
            <button
              key={tab.value}
              ref={(el) => { refs.current[i] = el }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              onClick={() => select(tab.value)}
              className={cn(tabBase, sizeTab[size], "-mb-px rounded-t-md", on ? "text-foreground" : "text-muted-foreground hover:text-foreground")}
            >
              {tab.label}
              {on && (
                <motion.span
                  layoutId={`${id}-underline`}
                  transition={transition}
                  className="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary"
                />
              )}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* Pill: aktif sekmenin ardinda token dolgulu pill kayar. */
export function PillTabs({ className, size = "md", ...rest }: TabsProps) {
  const { list, active, select, refs, onKeyDown } = useTabsState(rest, DEFAULT_TABS)
  const id = React.useId()
  const transition = useSlide()
  return (
    <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
        data-slot="styled-tabs"
        role="tablist"
        onKeyDown={onKeyDown}
        className={cn("inline-flex items-center gap-1 rounded-full bg-muted p-1", className)}
      >
        {list.map((tab, i) => {
          const on = tab.value === active
          return (
            <button
              key={tab.value}
              ref={(el) => { refs.current[i] = el }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              onClick={() => select(tab.value)}
              className={cn(tabBase, sizeTab[size], "rounded-full", on ? "text-primary-foreground" : "text-muted-foreground hover:text-foreground")}
            >
              {on && (
                <motion.span
                  layoutId={`${id}-pill`}
                  transition={transition}
                  className="absolute inset-0 -z-10 rounded-full bg-primary"
                />
              )}
              {tab.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* Segmented: segment kontrol gorunumu, aktif segment token dolgu ile yukselir. */
export function SegmentedTabs({ className, size = "md", ...rest }: TabsProps) {
  const { list, active, select, refs, onKeyDown } = useTabsState(rest, DEFAULT_TABS)
  const id = React.useId()
  const transition = useSlide()
  return (
    <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
        data-slot="styled-tabs"
        role="tablist"
        onKeyDown={onKeyDown}
        className={cn("inline-flex items-center gap-0.5 rounded-lg border border-border bg-muted p-1", className)}
      >
        {list.map((tab, i) => {
          const on = tab.value === active
          return (
            <button
              key={tab.value}
              ref={(el) => { refs.current[i] = el }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              onClick={() => select(tab.value)}
              className={cn(tabBase, sizeTab[size], "rounded-md", on ? "text-foreground" : "text-muted-foreground hover:text-foreground")}
            >
              {on && (
                <motion.span
                  layoutId={`${id}-segment`}
                  transition={transition}
                  className="absolute inset-0 -z-10 rounded-md border border-border bg-background shadow-sm"
                />
              )}
              {tab.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* Boxed: klasor/kutulu sekmeler, aktif sekme icerik kenarina baglanir. */
export function BoxedTabs({ className, size = "md", ...rest }: TabsProps) {
  const { list, active, select, refs, onKeyDown } = useTabsState(rest, DEFAULT_TABS)
  const id = React.useId()
  const transition = useSlide()
  return (
    <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
        data-slot="styled-tabs"
        role="tablist"
        onKeyDown={onKeyDown}
        className={cn("inline-flex items-end gap-1 border-b border-border", className)}
      >
        {list.map((tab, i) => {
          const on = tab.value === active
          return (
            <button
              key={tab.value}
              ref={(el) => { refs.current[i] = el }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              onClick={() => select(tab.value)}
              className={cn(tabBase, sizeTab[size], "-mb-px rounded-t-md", on ? "text-foreground" : "text-muted-foreground hover:text-foreground")}
            >
              {on && (
                <motion.span
                  layoutId={`${id}-box`}
                  transition={transition}
                  className="absolute inset-x-0 top-0 bottom-[-1px] -z-10 rounded-t-md border border-border border-b-0 bg-background"
                />
              )}
              {tab.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* Icon: ikon + etiket sekmeler, token aktif gostergesi (soft dolgu). */
export function IconTabs({ className, size = "md", ...rest }: TabsProps) {
  const { list, active, select, refs, onKeyDown } = useTabsState(rest, ICON_TABS)
  const id = React.useId()
  const transition = useSlide()
  return (
    <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
        data-slot="styled-tabs"
        role="tablist"
        onKeyDown={onKeyDown}
        className={cn("inline-flex items-center gap-1", className)}
      >
        {list.map((tab, i) => {
          const on = tab.value === active
          return (
            <button
              key={tab.value}
              ref={(el) => { refs.current[i] = el }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              onClick={() => select(tab.value)}
              className={cn(tabBase, sizeTab[size], "rounded-md", on ? "text-primary" : "text-muted-foreground hover:text-foreground")}
            >
              {on && (
                <motion.span
                  layoutId={`${id}-icon`}
                  transition={transition}
                  className="absolute inset-0 -z-10 rounded-md bg-primary/10"
                />
              )}
              {tab.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

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.

Underline

A token underline slides under the active tab.

Pill

A token pill slides behind the active tab.

Segmented

A segmented control with a raised active fill.

Boxed

Folder-style boxed tabs.

Icon

Icon and label tabs with a token indicator.

ai2 Styled tabs: 5 styled variations on the token system

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

5 exports in one file: Underline, Pill, Segmented, Boxed and Icon. 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 Styled 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.