# Tabs: Many tabs, segmented

> The pill style scrolls the same way, keeping its track while the picked tab stays in view.

Example: https://hextaui.com/docs/tabs/examples/overflow-segmented
Component docs: https://hextaui.com/docs/tabs.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tabs-overflow-segmented.json
```

This adds `components/examples/tabs/overflow-segmented.tsx` with the Tabs component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tabs/overflow-segmented.tsx"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const categories = [
  "All",
  "Design",
  "Engineering",
  "Marketing",
  "Sales",
  "Support",
  "Finance",
  "Legal",
  "Operations",
]

export function TabsOverflowSegmented() {
  return (
    <Tabs defaultValue="Finance" className="w-full max-w-xs">
      <TabsList>
        {categories.map((category) => (
          <TabsTrigger key={category} value={category}>
            {category}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}
```

## Props in this example

### Tabs

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `any` | `0` |  |

### TabsTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` | – |  |

## More Tabs examples

- [Underline](https://hextaui.com/docs/tabs/examples/line.md)
- [Many tabs](https://hextaui.com/docs/tabs/examples/overflow.md)
- [Icons and counts](https://hextaui.com/docs/tabs/examples/icons.md)
- [Vertical](https://hextaui.com/docs/tabs/examples/vertical.md)
- [Disabled](https://hextaui.com/docs/tabs/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/tabs/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/tabs/examples/rtl.md)