# Segmented tabs (goodtabs UI)

Tabs on a pill track with one indicator that slides to the active tab.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/segmented-tabs.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/segmented-tabs`

## Usage

```tsx
import {
  SegmentedTabs,
  SegmentedTabsContent,
  SegmentedTabsList,
  SegmentedTabsTrigger,
} from "@/components/ui/segmented-tabs"

<SegmentedTabs defaultValue="overview">
  <SegmentedTabsList>
    <SegmentedTabsTrigger value="overview">Overview</SegmentedTabsTrigger>
    <SegmentedTabsTrigger value="activity" count={3}>Activity</SegmentedTabsTrigger>
  </SegmentedTabsList>
  <SegmentedTabsContent value="overview">...</SegmentedTabsContent>
  <SegmentedTabsContent value="activity">...</SegmentedTabsContent>
</SegmentedTabs>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"sm" | "default"` | `"default"` | Track height on SegmentedTabsList: 28px or 32px. |
| shape | `"pill" | "rounded"` | `"pill"` | Corner shape of the track and indicator on SegmentedTabsList. |
| count | `number | string` |  | Optional count after the label on SegmentedTabsTrigger. |
| value, defaultValue, onValueChange | `radix Tabs props` |  | Controlled or uncontrolled, on SegmentedTabs. |

## When to use

- Switching between two to five views of the same thing: ranges, statuses, layouts
- Inside a card header or toolbar where a full tab bar would be too heavy
- When the active choice should read at a glance without a page change

## When not to use

- For page-level navigation between routes, use links or the navbar
- For more than five options or long labels, use a select or a sidebar
- For independent on and off switches, use toggles

## Notes for agents

- It is radix Tabs underneath: value, defaultValue and onValueChange work as in shadcn tabs
- The indicator is measured with ResizeObserver, so triggers can have any width and the list can scroll horizontally
- size and shape live on SegmentedTabsList, not on the root
- Put the list in a flex container with w-fit if you do not want it to stretch

Docs: https://ui.goodtabs.co/components/segmented-tabs