Tabs

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@acronis-platform/ui-react';

Tabs is a compound component built on Base UI's Tabs primitive (roving focus, arrow-key navigation, and ARIA come from Base UI). Tabs owns the selected value; TabsList holds the TabsTriggers (a bordered segmented control), and each TabsContent shows when its value matches the selected tab. This is a design-pending v1 themed from the shared brand tokens — the active segment is filled with the brand action blue (bg-secondary, the same blue the default Button uses) and carries a pure-white label; a --ui-tabs-* tier and the final active treatment are pending a Figma pass.

Adjacent segments collapse their shared border and only the two outer ends are rounded. Both are expressed with logical properties, so the strip mirrors automatically under dir="rtl".

Examples

A basic two-tab group:

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Controlled — drive value and react to onValueChange:

const [tab, setTab] = useState('account');

<Tabs value={tab} onValueChange={setTab}>
  {/* …list + content… */}
</Tabs>;

Vertical orientation switches arrow-key navigation to Up/Down and sets aria-orientation="vertical". Only the keyboard and ARIA behavior changes — TabsList's own styling is the horizontal segmented strip (row layout, collapsed inner borders, rounded inline ends), so a genuinely vertical strip needs layout classes of your own until the Figma pass defines one:

<Tabs defaultValue="account" orientation="vertical">
  {/* … */}
</Tabs>

API Reference

Tabs

TabsTrigger / TabsContent

TabsList accepts the standard attributes of the <div> it renders. See the Base UI Tabs docs for the full prop surface of each part.