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 Vue, 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">
<figure v-for="artwork in artworks" class="shrink-0" :key="artwork.artist">
<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.
