Tabs: Many tabs

When tabs don't fit, the list scrolls sideways, fades the edges with more to see, and scrolls the active or focused tab into view.

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
]

export function TabsOverflow() {
  return (
    <Tabs defaultValue="September" className="w-full max-w-sm">
      <TabsList variant="line">
        {months.map((month) => (
          <TabsTrigger key={month} value={month}>
            {month}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/tabs-overflow.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`

TabsList

Prop	Type	Default
`variant`	`"default" \| "line"`	`"default"`

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.