shadcn.io is not affiliated with official shadcn/ui
Rating Stars Awards Block for Radix UI
Four review sites as four cells with overshoot, each with read-only stars, the rating in words, the review count and a link, and a footnote that writes out the weighted average of the four.
Installation
Overview
Star ratings from four review sites for React with Radix UI. Four cells whose lines run a little past their corners with + marks each name a site, draw its rating as read-only stars in the foreground tone, say it in words ("4.8 out of 5"), count the reviews and link to them. The header gives the average of the four, weighted by review count, and a footnote under the cells writes the sum out so the figure can be checked. Every number is worked out from one typed list of four sites. Four across on a wide screen, two by two on a phone. It's built from Guides and Rating. The sites and their numbers are made up for the example, and the links go nowhere until you point them at your own listings.
FAQ
How do I change the sites?
Edit SITES at the top of the file: a name, a rating out of 5 to one decimal and a review count for each. The average in the heading, the total review count and the formula in the footnote are worked out from them.
Why show the formula?
So a visitor can check it: the footnote lists each rating times its review count, adds them and divides by the total, ending in the same figure as the heading. A rating you cannot check reads as marketing; one you can reads as a fact.
How are the stars read by a screen reader?
They are not: the drawing is hidden and inert, and the words under it ("4.8 out of 5") say the rating. The stars show the nearest half star, and the link's text carries the site's name for a screen reader.
Where do the links go?
Nowhere: they point to # so you can paste in the address of your listing on each site. Their label reads "Read them on" followed by the site's name for assistive technology.