Scroll area with horizontal scrollbar
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: One row of 10 photo cards that pans sideways under a horizontal bar, in a box only as tall as the row
When to use
- Fixed height lists and photo columns that scroll inside their own box with a custom scrollbar
- Sideways strips of cards or photos kept to the width of their container
- Wide tables that pan on both axes without widening the page around them
When not to use
- Rows and columns of figures wider and taller than their box: use the Scroll Area Both Scrollbars example
- Section links that light up as the reader scrolls past each heading: use the Scrollspy component
- A chat transcript that opens on the newest turn and follows streamed replies: use the Message Scroller component
- Shoppers weighing rival products on price, star rating and specs: use the Comparison blocks
Agent notes
- Each
imgloads a random picsum.photos placeholder labelled Image N; pointsrcandaltat your own photos - Give the
ScrollArearoot a bounded height or width throughclassName, or it grows with its content and never scrolls ScrollAreadraws only the verticalScrollBar; for sideways scrolling pass aScrollBarwithorientationhorizontal as a child
https://reui.io/components/scroll-area/c-scroll-area-2.mdget_example("c-scroll-area-2")npx shadcn@latest add @reui/c-scroll-area-2Shadcn Components in Scroll Area Horizontal
About Shadcn Scroll Area Horizontal
Scroll area with horizontal scrollbar. Built with the Scroll Area component. A free, open source shadcn scroll area example you can install with npx shadcn@latest add @reui/c-scroll-area-2 and edit as your own code.
What You Can Build With Shadcn Scroll Area Horizontal
- Composes Scroll Area, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-scroll-area-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Scroll Area Examples
- Basic Basic scroll area
- Both Scrollbars Scroll area with both scrollbars
- Fade Edges Scroll area with fade effect
- Scrollbar Gutter Scroll area with scrollbar gutter
Related Shadcn Component Categories
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Open-source shadcn select components for form selection, settings menus, and filter controls.
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Open-source shadcn sidebar components for app shells, collapsible side navigation, and dashboard layouts.
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Frequently Asked Questions
When should I use Shadcn Scroll Area Horizontal?
Use it for one row of 10 photo cards that pans sideways under a horizontal bar, in a box only as tall as the row.
Shadcn Scroll Area as a whole fits:
- Fixed height lists and photo columns that scroll inside their own box with a custom scrollbar
- Sideways strips of cards or photos kept to the width of their container
- Wide tables that pan on both axes without widening the page around them
For rows and columns of figures wider and taller than their box, use the Scroll Area Both Scrollbars example. For section links that light up as the reader scrolls past each heading, use the Scrollspy component. For a chat transcript that opens on the newest turn and follows streamed replies, use the Message Scroller component. For shoppers weighing rival products on price, star rating and specs, use the Comparison blocks.
How do I install Shadcn Scroll Area Horizontal?
Is Shadcn Scroll Area Horizontal free to use?
Which components does Shadcn Scroll Area Horizontal use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.