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 Solid, Ark UI does not size the pictures.
Installation
Anatomy
Usage
<ScrollArea class="w-full max-w-md whitespace-nowrap rounded-md border">
<div class="flex w-max gap-4 p-4">
{artworks.map(artwork => <figure class="shrink-0">
<div class="overflow-hidden rounded-md">
<img alt={`Artwork by ${artwork.artist}`} class="aspect-[3/4] h-fit w-fit object-cover" height={400} src={artwork.art} width={300} />
</div>
<figcaption class="pt-2 text-muted-foreground text-xs">
Photo by{" "}
<span class="font-semibold text-foreground">
{artwork.artist}
</span>
</figcaption>
</figure>)}
</div>
</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?
Both bars are already rendered, so this strip does not add another ScrollBar.
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
No extra props in this demo. The rest is on the Scroll Area page.
