shadcn.io is not affiliated with official shadcn/ui
Reviews by Size Storefront Block for Radix UI
Reviews of one pair of jeans read by people your size: a fit scale worked out from the reviews, waist and height filters that re-derive the average and the count, and four reviews to a page.
Installation
Overview
Let shoppers read the reviews that matter to them, with these size-aware product reviews for React with Radix UI. A header names the product and says what Sedge & Stone is. A hairline frame with a plus mark on each corner holds a rail at the start and the reviews beside it. The rail shows the average rating and a fit scale (Runs small, True to size, Runs large) whose marker is computed from each reviewer's own fit vote, then two filters: the waist size bought, a Toggle Group, and the reviewer's height, a native select. Choosing either narrows the 24 typed reviews, and the average, the count and the fit marker are worked out again from what remains. Reviews show four to a page with Previous and Next, each with the size bought, the height, the fit and a Helpful button that counts itself. An empty result is an empty state in the same frame with a button to clear the filters, and a status line says what is showing. It's built from Toggle Group, Rating, Guides and initials avatars, with a CSS entrance only. For a clothing or footwear product page where fit decides the sale.
FAQ
How do I fill it with my own reviews?
Edit LINES. Each line is name|size|height|rating|fit|date|helpful|title|body, where fit is -1 (ran small), 0 (true to size) or 1 (ran large) and the date is an ISO day. They are parsed once at module scope. The average, the count, the fit marker and the page count are all derived from the reviews left after filtering, so nothing else needs typing.
How is the fit marker worked out?
Each review's fit vote is turned into a position on the scale and the positions are averaged. Below 40 percent the scale reads Runs small, above 60 percent Runs large, and in between True to size. With no reviews left the marker rests in the middle and says "No fit yet".
What stays local, and how do I wire it to real reviews?
The reviews are sample shoppers with initials, the date is fixed (the block says it is as of 9 October 2026) and Helpful only counts on the page. To use real data, fetch the reviews for the product and replace REVIEWS; post the Helpful press to your API and keep the count it returns.
Does the list change height when I filter?
No. Each review is a row of fixed height, four to a page, and the list keeps room for four, so the panel stays the same height on every page and for an empty result.
How does it look on a phone?
The rail stacks above the reviews, with the size buttons in one row, and each review's Helpful button drops under its title. The reviews keep their fixed row height.
Is it accessible?
The size filter is a named group of buttons, the height filter is a labelled select, the stars are read as "4 out of 5" in text, and the fit scale has a text label. The status line is a polite live region that is there from the start, and Clear filters puts focus back on the first filter.