Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Layout

Scrollable Tabs for React

Twelve month tabs in a scroll area, so the list scrolls sideways instead of wrapping.

Framework
UI library

Twelve tabs do not fit in a narrow column, and wrapping them breaks the row. A ScrollArea around TabsList keeps the months on one line and scrolls them sideways. Use it for dates, categories or any long run of tabs read in order.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the tab list scroll?

ScrollArea wraps TabsList with w-full whitespace-nowrap. The list keeps its natural width, so January to December overflow the max-w-md area and scroll. A ScrollBar with orientation="horizontal" sits inside the ScrollArea.

How are the twelve months built?

A months array is mapped twice, once for triggers and once for panels. Each value is the lowercased month name, and the default is january.

Does each month get a panel?

Yes. Each panel shows the month and 2024, a muted paragraph and two stat boxes, Total Tasks and Completed.

Where do the task counts come from?

From the months array: each month has its own total and completed. The numbers are fixed, so they match between server and client renders and stay the same when you come back to a month.

Do the arrow keys move between months?

Yes. Left and Right move between the month triggers, and Home and End jump to January and December. The arrow keys only move focus, and Enter or Space selects. Set activateOnFocus on TabsList to select on focus.

Do the other months stay mounted?

No. Only the selected month's panel is in the page. Set keepMounted on each TabsContent to keep every month mounted.

All 11 tabs examples