Tabs

For a toggle that picks one value (Cash / Shares, theme, chart type), use Segmented Control instead. Tabs are for real tab bars, such as Buy / Sell or the settings nav.

Default, pills, line, and underline lists animate the selection indicator when you change tabs — a sliding fill (with a soft bubble in motion) for default and pills, a sliding bar for line (or a side bar when vertical), and a full-width hairline with the active mark on the rule for underline. Works in both horizontal and vertical orientations. Honors prefers-reduced-motion.

Playground

<Tabs defaultValue="overview" className="w-full max-w-sm"> <TabsList> <TabsTrigger value="overview">Overview</TabsTrigger> <TabsTrigger value="activity">Activity</TabsTrigger> </TabsList> <TabsContent value="overview">A summary at a glance.</TabsContent> <TabsContent value="activity">Recent activity.</TabsContent></Tabs>

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@sophic/portal-ui/components/ui/tabs";

<Tabs defaultValue="one">
  <TabsList>
    <TabsTrigger value="one">One</TabsTrigger>
    <TabsTrigger value="two">Two</TabsTrigger>
  </TabsList>
  <TabsContent value="one">First panel</TabsContent>
  <TabsContent value="two">Second panel</TabsContent>
</Tabs>

Page-level sections use variant="underline":

<TabsList variant="underline">
  <TabsTrigger value="profile">Profile</TabsTrigger>
  <TabsTrigger value="security">Security</TabsTrigger>
</TabsList>

Props

Tabs, TabsTrigger, and TabsContent pass every prop through to their Radix counterparts (value, defaultValue, onValueChange, orientation, ...). TabsList adds a variant on top of the Radix Tabs.List props.

TabsList

Tokens

Tabs reads --tabs-* from the Base System (with fallbacks so apps without those tokens keep the previous look).

Changelog

• 9 September 2026 — underline list: full-width hairline, sliding mark on the rule, roomier labels. Full notes
• 18 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 30 July 2026 — Sliding selection indicators on all variants; docs also call this Segmented Control. Full notes
• 28 July 2026 — Default track contrast on light backgrounds. Full notes
• 22 July 2026 — Selected state is a white pill with a light 0.5px edge. Full notes