shadcn.io is not affiliated with official shadcn/ui
Media Carousel Reviews Block for Radix UI
Six drawn owner pictures of a planter set in a carousel with a filter and a counted label for each group; pressing a picture shows its review in a band beneath.
Installation
Overview
An owners' picture carousel for React with Radix UI, for the Newelford planter set, a fictional range of ceramic planters. A header with the title and one sentence sits over three bands. The toolbar band holds a filter, All, Unboxing, In use and Close-up, each with its count. The strip band is a carousel of six pictures on hairlines, one per review, each a button with a caption; Previous and Next buttons sit under it with a polite "Page 1 of 4". The review band beneath shows the picked picture's review: where it is in the set ("Picture 3 of 6: On a south-facing windowsill"), read-only stars with their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words and a fixed date. The pictures are drawn greyscale scenes, never photographs: planters in a carton, on a windowsill, three sizes nested, a glaze up close, a trailing plant and a drainage hole from above. A filter changes the strip and starts it again at its first page; the review band holds the height of the longest review, so nothing below moves. On a phone the strip scrolls sideways. It's built from Carousel, Toggle Group, Rating, Avatar, Button and Guides.
FAQ
How do I use real photographs?
Each picture is drawn by Scene from scene data, with a comment above it that says what to swap. Replace the <Scene ratio={RATIO} scene={picture.scene} /> inside the tile's button with <img alt="" className="size-full object-cover" src={picture.src} />, add src to PICTURES, and keep the button's visible and screen-reader text; the description is read out beside the caption as the picture's alt text. Keep every picture the same ratio so the tiles line up.
How do I add pictures and groups?
Add an object to PICTURES with an id, title, group, description, scene (or src) and its review, and add the group to CHOICES if it is new. The filter counts, "Picture 3 of 6", the page count and the height of the review band all come from that list.
How does the carousel work?
It never plays by itself. Previous and Next wrap around the pages, a page is one picture, and the line under the strip says "Page 2 of 4". Pictures out of view cannot be focused or read; on the pages in between they scroll into view. When a filter leaves everything in view, the buttons stay but do nothing and the line says so.
The Carousel is Embla: the block holds its api, reads the page from selectedScrollSnap and the page count from scrollSnapList, and each slide is a labelled group. Embla does not mirror its own arrow keys in a right-to-left page; the Previous and Next buttons do.
What does the filter change?
Which pictures the strip holds. The counts in the labels are worked out from the list. If the picture you had picked is not in the new group, the first picture of that group is picked instead, and its review shows below. The strip is keyed by the filter, so it restarts at its first page.