> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> Switch content panels using accessible tab controls.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/tabs-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=a1caec379af3ca1526b8ab72eabf4ea1" alt="Tabs component preview (light)" width="400" data-path="images/ui/tabs-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/tabs.tsx`

## When to use

* Organize related content into multiple panels without navigating away.
* Use when content sections are distinct but related (e.g., Overview, Settings, History).

## Usage

```tsx theme={null}
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function Example() {
  return (
    <Tabs defaultValue="a">
      <TabsList>
        <TabsTrigger value="a">A</TabsTrigger>
        <TabsTrigger value="b">B</TabsTrigger>
      </TabsList>
      <TabsContent value="a">Panel A</TabsContent>
      <TabsContent value="b">Panel B</TabsContent>
    </Tabs>
  );
}
```

## Key props

<ParamField path="Tabs.defaultValue | value" type="string">
  Initial or controlled active tab value.
</ParamField>

<ParamField path="TabsTrigger.value" type="string">
  Associated value to activate a tab.
</ParamField>

<ParamField path="TabsContent.value" type="string">
  Content shown when the matching value is active.
</ParamField>

<Note>
  This component forwards all props from Radix Tabs primitives (Root/List/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/tabs](https://www.radix-ui.com/primitives/docs/components/tabs)
</Note>

## Styling tip

Keep tab labels concise and use subtle styling for a professional look.

```tsx theme={null}
<TabsList className="rounded-lg">
  <TabsTrigger value="a">Overview</TabsTrigger>
</TabsList>
```

## Accessibility

* Tab navigation with arrow keys and Enter/Space to activate.
* Only the active `TabsContent` is visible; others are hidden but remain in the DOM.
* Use descriptive labels for triggers to convey content clearly.