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

Vertical tabs

Five tab groups whose list runs down the side of the panel: left, right, card, rail and compact. Each is self-contained, sized, token-driven and keyboard accessible with role tablist, aria-orientation vertical and Up or Down arrow key navigation.

TabsVertical

Installation

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

Run the following command

npx shadcn@latest add @ai2/tabs-vertical

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-vertical.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"

/* Vertical tabs family: 5 vertical tab strips. The tab list stands beside the panel;
   the left, right, card, rail and compact variants change the layout and the
   indicator language. role="tablist" + aria-orientation="vertical", navigation with
   ArrowUp / ArrowDown, a roving tabIndex. Each export is a complete tabs component -
   internal active-tab state and a role="tabpanel" panel. 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 }

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

const DEFAULT_TABS: TabItem[] = [
  { value: "overview", label: "Overview", panel: "A summary of the workspace: recent activity, open items and the team." },
  { value: "activity", label: "Activity", panel: "Every event from the last seven days, newest first." },
  { value: "settings", label: "Settings", panel: "Workspace name, members and notification preferences." },
]

const ICON_TABS: TabItem[] = [
  { value: "overview", label: <><LayoutGrid /> Overview</>, panel: "A summary of the workspace: recent activity, open items and the team." },
  { value: "activity", label: <><Activity /> Activity</>, panel: "Every event from the last seven days, newest first." },
  { value: "account", label: <><User /> Account</>, panel: "Your profile, email address and connected accounts." },
  { value: "settings", label: <><Settings /> Settings</>, panel: "Workspace name, members and notification preferences." },
]

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 w-full select-none items-center justify-start 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 =
  "min-w-0 flex-1 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"

/* Vertical navigation: ArrowUp / ArrowDown move the selection, and focus travels with it. */
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 !== "ArrowUp" && e.key !== "ArrowDown") return
    e.preventDefault()
    const idx = list.findIndex((t) => t.value === active)
    const dir = e.key === "ArrowDown" ? 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 VerticalConfig = {
  fallback: TabItem[]
  /** Panelin listeye gore yeri. */
  side: "left" | "right"
  root?: string
  bar: string
  tab: string
  indicator: string
  active: string
  inactive: string
}

/* Shared shell: a vertical list plus panel. side="right" moves the list to the right. */
function VerticalTabsShell({ props, config }: { props: TabsProps; config: VerticalConfig }) {
  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]

  const bar = (
    <div
      role="tablist"
      aria-orientation="vertical"
      onKeyDown={onKeyDown}
      className={cn("flex w-44 shrink-0 flex-col 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}-vertical-indicator`}
                transition={transition}
                className={cn("absolute -z-10", config.indicator)}
              />
            ) : null}
            {tab.label}
          </button>
        )
      })}
    </div>
  )

  const panel = current ? (
    <div
      role="tabpanel"
      id={`${uid}-panel-${current.value}`}
      aria-labelledby={`${uid}-tab-${current.value}`}
      tabIndex={0}
      className={panelBase}
    >
      {current.panel}
    </div>
  ) : null

  return (
    <div data-slot="styled-tabs" className={cn("flex w-full items-stretch gap-4", config.root, className)}>
      {config.side === "right" ? (
        <>
          {panel}
          {bar}
        </>
      ) : (
        <>
          {bar}
          {panel}
        </>
      )}
    </div>
  )
}

/* Left: liste solda, aktif sekmede sol kenar cizgisi. */
export function LeftTabs(props: TabsProps) {
  return (
    <VerticalTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        side: "left",
        bar: "border-l border-border pl-1",
        tab: "rounded-md",
        indicator: "inset-y-1 -left-1 w-0.5 rounded-full bg-primary",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Right: liste sagda, aktif sekmede sag kenar cizgisi. */
export function RightTabs(props: TabsProps) {
  return (
    <VerticalTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        side: "right",
        bar: "border-r border-border pr-1",
        tab: "justify-end rounded-md",
        indicator: "inset-y-1 -right-1 w-0.5 rounded-full bg-primary",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Card: liste kart yuzeyinde, aktif sekme dolgulu kart satiri. */
export function CardTabs(props: TabsProps) {
  return (
    <VerticalTabsShell
      props={props}
      config={{
        fallback: ICON_TABS,
        side: "left",
        bar: "rounded-lg border border-border bg-card p-1.5",
        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",
      }}
    />
  )
}

/* Rail: dar ray, aktif sekme primary tinti ve kalin sol cubuk. */
export function RailTabs(props: TabsProps) {
  return (
    <VerticalTabsShell
      props={props}
      config={{
        fallback: ICON_TABS,
        side: "left",
        bar: "rounded-lg bg-muted p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md border-l-2 border-primary bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Compact: dar ve yogun liste, aktif sekme yumusak dolgu. */
export function CompactTabs(props: TabsProps) {
  return (
    <VerticalTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        side: "left",
        root: "gap-3",
        bar: "w-36 gap-0.5",
        tab: "rounded-sm px-2",
        indicator: "inset-0 rounded-sm bg-[color-mix(in_oklab,var(--color-foreground)_7%,transparent)]",
        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.