Tabs

Switch between related views in the same context. Keep tab labels short and panels self-contained.

Examples

Sections

Summary of activity and recent updates.

Overview

Tabs pair a list of tabs with matching panels. Place TabsIndicator inside the list for the animated underline under the active tab. Built on Base UI for keyboard and focus behavior.

tsx

import {
  Tabs,
  TabsList,
  TabsTab,
  TabsIndicator,
  TabsPanel,
} from "@standard-ui/react"

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="projects">Projects</TabsTab>
    <TabsTab value="account">Account</TabsTab>
    <TabsIndicator />
  </TabsList>
  <TabsPanel value="overview">…</TabsPanel>
</Tabs>

Usage

Values

Each tab and panel share a value. Set defaultValue (or controlled value) on the root to the first tab you want active.

tsx

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="projects">Projects</TabsTab>
  </TabsList>
  <TabsPanel value="overview">…</TabsPanel>
  <TabsPanel value="projects">…</TabsPanel>
</Tabs>

Indicator

Render TabsIndicator as a sibling of the tabs inside TabsList. It tracks the active tab width and offset.

tsx

<TabsList>
  <TabsTab value="overview">Overview</TabsTab>
  <TabsTab value="projects">Projects</TabsTab>
  <TabsIndicator />
</TabsList>

API

Root accepts Base UI Tabs props. Parts:

Prop / part	Type	Default	Description
defaultValue	string \| number \| null	—	Uncontrolled initially active tab.
value	string \| number \| null	—	Controlled active tab.
onValueChange	(value, event) => void	—	Called when the active tab changes.
TabsList	—	—	Container for tabs and the indicator.
TabsTab	—	—	Tab control. Requires a `value`.
TabsIndicator	—	—	Animated underline under the active tab.
TabsPanel	—	—	Panel content for a matching `value`.