Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Scrollable Tabs
Scrollable tabs with ScrollArea wrapping TabsList for horizontal scrolling through many tab options with whitespace-nowrap built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Too many tabs break layouts—scrolling solves gracefully. This React tabs component wraps shadcn/ui TabsList in ScrollArea with horizontal ScrollBar and whitespace-nowrap for overflow handling. Built with mapped months array rendering twelve tabs that scroll horizontally, scrollable tabs handle many options—perfect for date navigation, category filters, step indicators, timeline views, or any interface with many tabs where horizontal scrolling beats wrapping or shrinking labels into illegibility.
January 2024
View statistics and activity for January. Track your progress, goals, and achievements throughout the month.
Total Tasks
40
Completed
15
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Tabs
Sidebar-style vertical layout
Full Width Tabs
Grid layout equal width tabs
Standard Tabs
Default horizontal tabs
Scroll Area
Scrollable container component
Carousel
Alternative navigation pattern
Pagination
Alternative multi-page navigation