Tab Views

Tabs lets users move between sibling views without leaving the page. Built on Radix, it is composed from TabsList (the row of triggers), TabsTrigger (one clickable tab), and TabsContent (the panel shown for the active tab). Each trigger and panel share a value so the right content shows when its tab is selected.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: tabs.tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@beacon/design-system";

<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>;

Parts

Part	Role
Tabs	Root container. Accepts defaultValue (uncontrolled) or value + onValueChange (controlled) to set the active tab.
TabsList	The horizontal bar that holds the triggers.
TabsTrigger	A single tab button; its value selects the matching content.
TabsContent	The panel rendered when its value matches the active tab.

TabsList, TabsTrigger, and TabsContent forward all props of their Radix counterparts, including className.

When to use

• Splitting a record’s detail page into sections (Overview, Activity, Documents) that share one URL.
• Switching between a few peer views where only one is relevant at a time.
• Settings panels grouped into named categories.

Do not use Tabs for primary app navigation between routes; that belongs to the Tower vertical nav and each module’s horizontal nav, not in-place tab panels.