shadcn.io is not affiliated with official shadcn/ui
Scroll Area examples · Standard
Horizontal ScrollArea Scroll Area for React
A horizontal scroll area for an image strip that scrolls sideways.
Image galleries stacked vertically waste space, and people expect to browse them sideways like a catalog. This example lays five artworks out in a row inside a Scroll Area with a horizontal bar. The row is flex w-max, so it is as wide as its items, the frame has whitespace-nowrap, and each figure is shrink-0, so nothing wraps or squeezes. Use it for galleries, product showcases, team lists, and other content browsed side by side.
Preview
Installation
FAQ
Why do the artworks scroll sideways?
The inner row is flex w-max gap-4, so it is as wide as the five figures. ScrollArea is only max-w-md, and whitespace-nowrap is on the area. Each figure has shrink-0, so a figure keeps its width.
Where is the horizontal bar?
This file renders ScrollBar with orientation set to horizontal inside ScrollArea. The built-in bar is vertical.
How is one artwork marked up?
A figure with shrink-0. The image is aspect-[3/4], h-fit w-fit, and object-cover, with width 300 and height 400. alt is "Artwork by" plus the artist's name. The figcaption is pt-2 text-xs text-muted-foreground.
Where is the padding?
p-4 is on the flex row, so the first and last figure sit inset from the frame, and that padding scrolls with them. The frame itself is rounded-md border on ScrollArea.
Related
- Scrollable Tags Scroll AreaA row of technology badges in a
- Both Orientations Scroll AreaA scroll area that scrolls both ways, for
- Basic ScrollArea Scroll AreaA basic vertical scroll area for long
- Standard CarouselA basic carousel of five numbered slides
- With Resizable Panels Scroll AreaTwo resizable panels, each with its own
- Dynamic Content Scroll AreaA scroll area whose list grows with a