Shadcn.io is not affiliated with official shadcn/ui
Horizontal ScrollArea
Horizontal ScrollArea for image galleries and content carousels with horizontal-only scrolling and explicit ScrollBar component built with shadcn/ui
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.
Horizontal ScrollArea preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.