Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Scroll Area - Horizontal ScrollArea
Horizontal ScrollArea for image galleries and content carousels with horizontal-only scrolling and explicit ScrollBar component built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Image galleries stacked vertically waste space—users want to browse horizontally like flipping through a catalog. This React ScrollArea enables horizontal scrolling with explicit ScrollBar orientation set to horizontal from shadcn/ui. Built with Radix UI, the pattern uses flex with w-max to prevent wrapping, whitespace-nowrap on the container, and shrink-0 on items to maintain sizing. Perfect for artwork galleries, product showcases, team member lists, testimonials, or any content better browsed side-by-side.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic ScrollArea
Vertical scrolling for text content
Both Orientations ScrollArea
Horizontal and vertical scrollbars
Carousel
Automatic sliding carousel component
ScrollArea with Resizable
Resizable panels with scroll areas
Avatar
User avatar component
Card
Card container component
Questions you might have
React Scroll Area - Basic ScrollArea
Basic vertical ScrollArea for containing long text content within fixed-height containers like terms of service or documentation built with shadcn/ui
React Horizontal Separator
A horizontal separator line dividing vertical content sections with default styling and space-y spacing