Tabs

Basic usage

Use defaultValue for uncontrolled behavior.

Pills variant

Use variant="pills" on both TabsList and TabsTrigger for a segmented control style. The two levels share no React context, so the prop really does have to be repeated — that is the design, kept for compatibility.

Rule of thumb from the package: default is for page-level tabs, pills for tabs inside a panel or card.

Compound API

Tabs carries its parts as properties as well as exporting them individually, so Tabs.List, Tabs.Trigger and Tabs.Content are the same components under a shorter import. Both spellings are supported; pick one per file.

Shared class recipes

The two variants are published as data, not just baked into the components: tabsListVariants and tabsTriggerVariants are Record<TabsVariant, string> lookups, and TABS_TRIGGER_BASE holds the focus ring and disabled state shared by both. They live in a module with no 'use client' directive on purpose: Tabs is a client component and RouteTabs is not, and a plain data module is the only way both can read one copy instead of drifting apart.

import { TABS_TRIGGER_BASE, cn, tabsListVariants, tabsTriggerVariants } from '@comitor/ui'

// The two class recipes live in a plain module with no 'use client', so a
// Server Component can read them. Both Tabs and RouteTabs consume this same
// table — change a tab's look in one place and both follow.
export function CustomTabStrip({ active }: { active: string }) {
  return (
    <div className={cn('flex gap-0', tabsListVariants.pills)}>
      {['Daily', 'Weekly'].map((item) => (
        <button
          key={item}
          type="button"
          data-state={item === active ? 'active' : 'inactive'}
          className={cn(tabsTriggerVariants.pills, TABS_TRIGGER_BASE)}
        >
          {item}
        </button>
      ))}
    </div>
  )
}

The triggers key off data-[state=active], which is why anything you build with these classes only has to set data-state to inherit the whole look.

How the active tab is marked

In the default variant the label only shifts from muted-foreground to foreground, so the 2px underline is the one element carrying colour information. It is drawn with border-primary-ink rather than a hard-coded border-gold-300, so an app that rebrands the accent gets a matching underline and the package's second palette can restyle it without touching the component.

Worth knowing what that token resolves to. In the default palette --primary-ink points straight at --primary (#E8B824 — the same gold as gold-300), which is 1.86:1 against the page, under the 3:1 WCAG 1.4.11 asks of a non-text cue. The package names this exact case — “the Tabs active underline” — in the list of shortfalls its approved palette knowingly accepts, and the remedy it ships is the second palette: under data-contrast="high" the token becomes gold-500 (#7A5800) at 6.51:1. Dark sits at 12.67:1 in both. So do not treat the underline as the whole answer in light — aria-selected is what carries the state for assistive tech.

The border is always 2px, transparent when inactive and -mb-px to sit on the list's own bottom rule, so switching tabs never nudges the layout.

Tabs Props

TabsList Props

TabsTrigger Props

TabsContent Props

RouteTabs Props

Accessibility

• Uses role="tablist", role="tab", and role="tabpanel".
• Active tab has aria-selected="true" and tabindex="0".
• Inactive tabs have tabindex="-1"; arrow keys move between them and Tab moves out of the strip.
• Tabpanel is focusable for keyboard users. The panel's own outline is cleared — the visible focus ring belongs to the triggers, via the shared TABS_TRIGGER_BASE classes.
• With activationMode="manual", arrowing through tabs moves focus without switching panels — worth it when a panel is expensive to load.
• Never use these roles for navigation. A tab strip whose items are routes belongs in RouteTabs, which uses aria-current="page" on real links instead.