Tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@epilot/spark-ui/tabs'

<Tabs defaultValue="account">
  <TabsList aria-label="Settings">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account…</TabsContent>
  <TabsContent value="password">Password…</TabsContent>
</Tabs>

There is a single TabsTrigger: it adapts to the closest TabsList's variant automatically (no per-variant trigger components).

Examples

With a counter

Icon + text

Compose an icon before the label. The trigger centers both.

Icon only

Pass an aria-label (there's no visible text) and narrow the tab with a min-w override.

Text + subline

Stack a title over a lighter subline.

Overflow

Mobile-first: when the tabs don't fit, the list scrolls horizontally on its own, no wrapper needed. The overflowing edge shows a frosted-glass chevron button that scrolls on click; selecting a partially-visible tab travels it fully into view, revealing a slice of the next one. Keyboard focus auto-scrolls too, and the underline bar slides with its tab. Scrollbars are hidden.

High contrast

Colors

The active ink and the underline bar follow the accent knob.

API Reference

Built on Base UI Tabs. See the Base UI docs for the full API. Spark additions:

• underline is the Spark tab: bold label, a compact hover box around the label (not the full-height trigger), and a per-tab bottom rail (neutral) with a 4px accent bar that worms to the active tab (stretches across, then contracts).
• Hover is neutral (soft fill, ink stays neutral until selected, which is Base UI behavior).
• Tabs scroll horizontally when they overflow their container (mobile-first, built-in).
• variant="pill" / "default" are deprecated: pill (a segmented control) isn't part of Spark's tab design; it still renders for back-compat but is undocumented.
• Tabs are not data-style-aware (a tab strip has no solid/soft/surface axis); they theme via the accent, neutral, radius, scaling, and data-high-contrast knobs.
• TabsTriggerUnderline / TabsTriggerPill are deprecated aliases of TabsTrigger (kept for back-compat); variant="default" is a deprecated alias of underline.