shadcn.io is not affiliated with official shadcn/ui
Verified Toggle Reviews Block for React Aria
A 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.
Installation
Overview
A verified-purchases switch for React with React Aria, for the Sablemoor Duo, a fictional espresso machine. A header holds the title, one sentence and a Switch, "Verified purchases only", at its end. Under it, one framed figure of two cells: at the start the score (the average as a rolling figure beside read-only stars, how many reviews it is based on, the share who rated it four or more) and a delta line ("0.1 lower than all 40 reviews (3.9)"); at the end, five distribution rows, each a bar with its count and share. Flip the switch and the summary is worked out again between all 40 reviews and the 31 verified ones: the figure rolls, the bars slide, the delta line changes and a polite sentence says what is now shown. Nothing is a sentiment colour: stars and bars are your theme's text colour. Counts per star are typed once, split into verified and other, and every figure comes from them. It's built from Switch, Rating, Sliding Number and Guides, with CSS transitions only.
FAQ
How do I use my own counts?
Edit TALLY at the top of the file: for each star rating, how many reviews are verified and how many are other. The totals, both averages (in tenths, by whole-number maths: 157 stars over 40 reviews is exactly 3.9, 119 over 31 is 3.8), the stars drawn to the nearest half, the share rated four or more, each row's share by the largest remainder method and the delta line are worked out when the module loads. Nothing is estimated: there are no confidence intervals, only the counts.
What does the switch change, and is it announced?
It changes which reviews are counted. Every figure, bar and the delta line are recomputed from the same typed counts, and a polite, unseen status line says what is now shown ("Showing 31 verified reviews: average 3.8 out of 5, 68% rated 4 or more."). The switch is named "Verified purchases only" and works with Space.
React Aria's Switch takes isSelected and onChange.
How is the delta line worked out?
It is the difference of the two averages in tenths of a star, with a direction arrow and words, so the direction never depends on colour. With the switch on it compares the verified average with all reviews; with it off it says what verified purchases alone would be. Both sentences share one cell, so the block does not change height.
Why are the bars not coloured?
The bars are your theme's text colour on a faint track, so the chart reads in every preset, light and dark, and the page's primary colour stays free for its calls to action. The bars share one scale across both states, so the verified view is visibly smaller.