Logomark

Tabs segmented

Last updated on March 25, 2026 at 5:50 PM

Tabs are a navigational component that allows users to move easily between groups of related content.

SB

Storybook

FG

Figma

GH

GitHub

Code

Usage

The TabsSegmented component is a Base UI component.

⚙️ System
<Tabs defaultValue="system">
  <TabsSegmentedList>
    <TabsSegmentedTab value="system">⚙️ System</TabsSegmentedTab>
    <TabsSegmentedTab value="light">☀️ Light</TabsSegmentedTab>
    <TabsSegmentedTab value="dark">🌙 Dark</TabsSegmentedTab>
  </TabsSegmentedList>
  <Spacer height={16} />

  <TabsPanel value="system">⚙️ System</TabsPanel>
  <TabsPanel value="light">☀️ Light</TabsPanel>
  <TabsPanel value="dark">🌙 Dark</TabsPanel>
</Tabs>