Tabs: Many tabs, segmented

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

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>
  )
}

Add this example

This adds the example as components/examples/tabs/overflow-segmented.tsx, together with the Tabs component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs-overflow-segmented.json

To add only the component, follow the Tabs installation.

Props in this example

The Tabs props this example sets, from the API reference.

Tabs

Prop	Type	Default
`defaultValue`	`any`	`0`

TabsTrigger

Prop	Type	Default
`value`	`any`	`–`

Every prop is in the Tabs API reference.

More Tabs examples

See them all, with keyboard support and accessibility notes, on the Tabs page.