shadcn.io is not affiliated with official shadcn/ui
Thumbnail Strip Gallery Block for Solid
A viewer for a lighting shop: a framed 4:3 stage with Previous and Next, its caption beside it, and a scrollable strip of twelve thumbnails whose arrow keys step through the pictures.
Installation
Overview
A thumbnail-strip gallery for Solid with Ark UI. A framed stage shows one picture at 4:3, with Previous and Next buttons on it and a "3 / 12" counter, and the picture's caption beside it: the room, a title, a sentence about it and a short list (what it is fitted with, its light, its size, its price). Under the stage a band holds the strip: twelve thumbnails in a row you scroll. The chosen thumbnail is ringed and scrolled to the middle of the strip, the arrow keys step through the pictures from the strip (Home and End jump to the ends), and a polite line names the picture for screen readers. The stage keeps one size whichever picture it holds, so nothing below it moves. The pictures are drawn in the theme's greys, never photographs. The page's rails and top rules come from the Guides spine. It's built from Guides and Button, with CSS transitions for the entrance and the fade between pictures. For catalogues, listings, portfolios and any product with more than a few views.
FAQ
How do I use my own photographs?
The drawn pictures are one small Scene component. Where the code comment says so, swap it for an <img>: in the stage <img alt="" className="size-full object-cover" src={picture.src} /> (the stage's role="img" wrapper names it), and in each thumbnail the same without a wrapper. Add src to each entry of PICTURES. Keep every picture 4:3, the ratio of the stage, or crop them with object-cover as the drawn ones are cropped on a phone.
Which keys work, and what does a screen reader hear?
The strip is a radio group named "Pictures": Tab goes to the chosen thumbnail, the arrow keys move to the previous or next one and choose it, and Home and End jump to the first and last. In a right-to-left layout the arrows follow the reading direction. Each thumbnail is named by the picture's title, and a polite line announces "Island lights, 2 of 12" when the picture changes.
What happens after the last picture?
Next on the last picture goes back to the first, and Previous on the first goes to the last. The counter and the polite line follow. Remove the wrap in around if you'd rather the buttons stop at the ends.
Why doesn't the layout move when the picture changes?
The stage is a fixed 4:3 box (square on a phone) and the caption's title and sentence reserve their lines, so a longer title or note never pushes the strip down. The new picture fades in inside the stage in 300 ms; with reduced motion it simply swaps.
How does the strip scroll?
It is a plain horizontally scrolling row (touch swipe, trackpad or the scroll bar), and choosing a thumbnail by key or with Previous and Next scrolls it so the chosen one sits in the middle. The scroll moves only the strip, never the page, and it jumps instead of gliding under reduced motion.