Tabs

Usage and anatomy

Tabs switches between related panels without leaving the page. Place Tabs.Trigger parts inside Tabs.List, and match every trigger's value to a Tabs.Content value.

import * as Tabs from "@acme/ui/tabs"

<Tabs.Root defaultValue="account">
  <Tabs.List aria-label="Settings">
    <Tabs.Trigger value="account">
      <Tabs.TriggerLabel>Account</Tabs.TriggerLabel>
    </Tabs.Trigger>
    <Tabs.Trigger value="security">
      <Tabs.TriggerLabel>Security</Tabs.TriggerLabel>
    </Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">Account settings</Tabs.Content>
  <Tabs.Content value="security">Security settings</Tabs.Content>
</Tabs.Root>

Compose trigger text with Tabs.TriggerLabel and optional icons with Tabs.TriggerIcon. Size and orientation are inherited from Tabs.Root.

API reference

Tabs.Root

Tabs.Root also accepts Radix Tabs root props. Tabs.List, Tabs.Trigger, and Tabs.Content accept their corresponding Radix props; every trigger and content panel requires a matching value.