Tabs

Three skins over one spring. Pill for top-level surface switching, underline for document-like sections, segment for tight either/or controls. The active indicator glides — it never blinks — and inactive panels stay mounted so their content survives for crawlers and assistive tech.

Variants (live)

Click between triggers to see the indicator glide. Each variant shows its active panel below.

Pill

Total balance, per-asset rows, 24h change.

Underline

Status, confirmations, fee and fee rate for this transaction.

Segment

1.417 123 45 BTC

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@coldharbor/ui";

<Tabs defaultValue="portfolio" variant="pill">
  <TabsList>
    <TabsTrigger value="portfolio">Portfolio</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="portfolio">…</TabsContent>
  <TabsContent value="activity">…</TabsContent>
</Tabs>

--ch-primary
--ch-primary-fg
--ch-surface
--ch-border
--ch-fg
--ch-fg-muted
--ch-focus

Trigger states — every variant

Active and inactive are real states (defaultValue picks the active trigger). Hover and focus-visible are forced with static classes on an inactive trigger. Tabs has no per-trigger disabled state — that is reported as a gap, not simulated.

Pill — active + inactive

Pill — hover (forced)

Inactive trigger lifts to full foreground.

Pill — focus-visible (forced)

Underline — active + inactive

Underline — hover (forced)

Underline — focus-visible (forced)

Segment — active + inactive

Segment — hover (forced)

Segment — focus-visible (forced)

<TabsTrigger value="receive">Receive</TabsTrigger>
{/* hover/focus are pointer states — never hard-code them in product code */}

--ch-primary
--ch-primary-fg
--ch-surface
--ch-border
--ch-fg
--ch-fg-muted
--ch-focus

Themes

The segment variant — unit switcher — under all three layers.

--ch-primary
--ch-primary-fg
--ch-surface
--ch-border
--ch-fg
--ch-fg-muted
--ch-focus