shadcn.io is not affiliated with official shadcn/ui
Sized Mosaic Wall Reviews Block for React
A wall of twenty-four bicycle light reviews as a mosaic whose tile size follows helpful votes, length or nothing, behind a Show all button.
Installation
Overview
A review wall for React with Base UI, for the Otterworth Beam 600, a fictional bicycle light. A centred header says how many reviews there are and the average, with a "Size by" toggle group (Helpful votes, Length, Equal) under it. The wall is a mosaic of cells on shared hairlines: from a desktop up the four top reviews by the chosen measure get a large tile (two cells by two), the next eight a wide one and the rest a small one, and the dense grid refills without gaps. Every tile is a full review: stars with the value in words, a title, the text, the reviewer with a "Verified purchase" mark in words, the date and the helpful count. The wall is masked at a fixed height behind a "Show all 24 reviews" button. On a tablet or phone every tile is the same size, two across or one, and only the first six show until the button is pressed. It's built from Toggle Group, Rating, Avatar, Button and Guides.
FAQ
How is a tile's size chosen?
Reviews are ranked by the measure (helpful votes, or the length of the text) and the top four become large, the next eight wide and the rest small; "Equal" makes them all small. The counts are LARGE and WIDE at the top of the file. The order of the tiles stays newest first whatever the sizes, so the reading order never changes. With the typed reviews every size mode packs into complete rows; if you change the data, check that no cell is left empty.
How is this different from the testimonials wall?
A testimonials wall shows curated quotes. This wall is made of reviews: each tile carries a rating, a verified mark, a date and a helpful count, and the tile size is derived from the data. The reviews are example data for a fictional product.
What does Show all do?
On a desktop it removes the height mask so the whole wall shows; on a tablet or phone it reveals the other eighteen tiles. The label stays "Show all 24 reviews" and the button reports whether the wall is expanded. Nothing is loaded: all 24 reviews are in the page.
Related
- Pro
Clipped Wall Testimonials
Walls and lanesA wall of twenty-four short customer notes for a component kit, set as a masonry band that shares its hairlines and fades out under a mask until a Show all button opens the rest.
- 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.
- Pro
Waterfall Testimonials
Walls and lanesNine customer quotes for a deploy platform in a staircase of three columns, one per stage of being a customer, each starting a step lower, in cells whose lines overshoot their corners.
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
Guestbook Customer Wall
CustomersA customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.
- Pro
Tabbed Sections Reviews
Lists and pagesEighteen reviews of a sewing machine sorted into four tabs, Most recent, Most helpful, Critical and Verified, each with its derived count and three reviews.