shadcn.io is not affiliated with official shadcn/ui
Photo Wall Reviews Block for React
A bento wall of drawn owner pictures of linen bedding with a filter for its three finishes and a summary tile that works out the finish's average rating; a tile reveals who took it on hover and focus.
Installation
Overview
A photo wall for React with Base UI, for Teaselford linen bedding, a fictional range in three finishes. A centred header with the title and one sentence sits over a bento of tiles on shared hairlines that run rail to rail: one large square, four small squares, a wide tile, and a summary tile. The summary holds a Toggle Group of the three finishes (Flax, Oat and Slate), the finish's average rating as a figure and as half stars, and a polite line that says how many reviews stand behind its six pictures. Choosing a finish swaps the six drawn pictures (a folded stack, the corner of a made bed, the weave up close, a hem, a duvet and pillows, a cushion on the sofa) in the same places, so the wall never moves. A tile reveals who took the picture and the rating they gave on hover, on keyboard focus, and when pressed; a press holds it open. The pictures are drawn greyscale scenes, never photographs, and Flax is drawn palest and Slate darkest. On a phone the wall is two columns and the summary comes first. It's built from Toggle Group, Rating and Guides.
FAQ
How do I use my own finishes and photographs?
Edit FINISHES: each finish has a label and six photos made by photosOf(finish, names, ratings), which gives each place in the wall its drawn scene, reviewer name and rating. The average and the count on the summary tile are worked out from those ratings with whole-number maths. To use real photographs, give each photo a src and replace <Scene ... /> inside Tile with <img alt="" className="size-full object-cover" src={photo.src} />; keep the square and wide shapes of the places so the wall lines up.
How does a tile reveal its reviewer?
Each tile is a button. The reviewer's name and rating sit in a bar at the foot of the picture, hidden by a clip rather than by opacity so the text always stays in the page for a screen reader. Hovering, focusing the tile with the keyboard, or pressing it opens the bar; pressing again closes it, and choosing another finish closes every bar. On touch screens the bars show by default.
What does choosing a finish change?
The six pictures, the average rating and the sentence on the summary tile. Every finish has the same six places, so the wall's shape and height stay the same. The summary line is a polite status, so a screen reader hears "Oat: 6 reviews, one behind each picture" after you change.
Related
- Pro
Photo Grid Gallery Reviews
Owner photosNine drawn owner pictures of a cutting board in a three-column grid of mixed shapes; each opens a dialog with the picture large beside its review, and the arrow keys step through all nine.
- Pro
Media Carousel Reviews
Owner photosSix 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.
- Pro
Star Rating Grid Reviews
Criteria and compareEight hand tools compared at a glance in a grid on shared hairlines, each with a drawing, stars, the average and count, and the share that recommend it, sorted by a Select and with a hover card of category scores.
- Pro
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
- Pro
Verified Toggle Reviews
Score summariesA review summary with a Verified purchases only switch: the average, the count, the share rated four or more and five distribution rows are worked out again, with a delta line against all reviews.
- Pro
Masonry Layout Reviews
Cards and wallsTwelve reviews of pruning shears as cards of every length in CSS columns, with a star filter, an order switch, a polite count and a Helpful vote on each card.