shadcn.io is an independent project built on shadcn/ui
Five portrait images sit in one row inside a bordered panel. Each is captioned with an artist, starting with Ornella Binni. The row scrolls sideways.
Scroll sideways for a strip of images that should stay on one line. A Carousel fits if people should move one image at a time. On React, Base UI does not size the pictures.
Installation
Anatomy
Usage
<ScrollArea className="w-full max-w-md whitespace-nowrap rounded-md border">
<div className="flex w-max gap-4 p-4">
{artworks.map((artwork) => (
<figure className="shrink-0" key={artwork.artist}>
<div className="overflow-hidden rounded-md">
<img
alt={`Artwork by ${artwork.artist}`}
className="aspect-[3/4] h-fit w-fit object-cover"
height={400}
src={artwork.art}
width={300}
/>
</div>
<figcaption className="pt-2 text-muted-foreground text-xs">
Photo by{" "}
<span className="font-semibold text-foreground">
{artwork.artist}
</span>
</figcaption>
</figure>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>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.
API Reference
Scroll Area
Sets orientation="horizontal". The rest is on the Scroll Area page.
