shadcn.io is not affiliated with official shadcn/ui
Image Gallery Carousel Block for React Aria
Eight drawn pieces from a photographer's portfolio on a one-up stage with a caption band, a Shortlist toggle and a rail of thumbnails that scrolls itself to keep the shown piece in view.
Installation
Overview
Show a body of work one piece at a time, with a rail that always knows where you are, with this image gallery carousel for React with React Aria. Stillmoor, a photographer's portfolio, lays out eight pieces (a jetty, a stairwell, a studio table, a footbridge, a quarry, a glasshouse, grain silos and a viaduct) as line drawings in your theme's foreground weights, never photographs. The stage shows one piece, with the next peeking at the edge on a phone. Under it a caption band holds the title, "Piece 4 of 8" with the place, a Shortlist toggle and Previous and Next Buttons, and under that a rail of thumbnails: the shown one is ringed, a press goes to its piece, a swipe on the stage moves the ring, and the rail scrolls itself so the ring stays in view. Shortlisting is local and counts under the rail. The ruled bands come from Guides. It's built from Carousel, Button and Guides, with CSS transitions only. The pieces, places and drawings are made up for the example.
FAQ
How do I use my own pieces?
Edit PIECES. Each has an id, a title, a place, a year, an alt sentence for screen readers and a kind plus seed for its drawing. The caption, the counter, the plate numbers and the thumbnail names ("Show piece 4: Quarry steps") all come from that list. For photographs, replace Scene in the stage and in Thumb with an img (the comment above it says how) and keep the shapes.
How do the stage and the thumbnails stay in step?
There is one page number. A thumbnail press sets it, and so do a swipe, the arrow keys, Previous and Next. The ring and the rail's scroll position follow it, so the shown thumbnail is always in view without moving the page.
The page is read from Embla's select event, and a thumbnail calls scrollTo.
How does it work with a keyboard?
Tab reaches the Shortlist toggle, Previous, Next and then each thumbnail. With focus in the stage, the arrow keys move the pieces (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Pieces out of view are hidden from the tab order and from screen readers.
What is announced when it moves?
The line under the title is the block's one polite live region: after each move a screen reader hears, for example, "Piece 5 of 8, Ellisford", and "on the shortlist" when it is. The stage itself is silent, and each drawing has a one-sentence description for screen readers.