shadcn.io is not affiliated with official shadcn/ui
Platform Rankings Awards Block for React
A table with one row for each of four review sites, showing a product's rating as read-only stars and words, the review count and its rank in the category, with a foot row for the weighted average.
Installation
Overview
A platform-by-platform ranking for React with Base UI. A native table has a row for each of four review sites: the product's rating as read-only stars in the foreground tone and in words ("4.8 out of 5"), the number of reviews and its rank in the category ("2nd of 41"). A foot row sums it up with the average weighted by review count, the total number of reviews and on how many sites it ranks in the top three, and the header repeats the average and that count. All of it is worked out from one typed list of sites. On a phone the rating and the review count move under the site's name and the table keeps two columns. It's built from Guides, Rating and a native table. The sites and their numbers are made up for the example.
FAQ
How do I change the sites?
Edit SITES at the top of the file: each site has a name, a rating out of 5 to one decimal, a review count, the product's place in the category and how many products the site ranks there. The average, the totals, the ordinals and the top-three count are worked out from it.
How is the average worked out?
Each site's rating is weighted by its review count, summed and divided by the total number of reviews, then rounded to one decimal. A site with few reviews moves it less than a site with many. The next block, Rating Stars, writes the same sum out in a footnote.
How are the stars read by a screen reader?
They are not: the drawing is hidden and inert, and the words beside it ("4.8 out of 5") say the rating. The stars show the nearest half star.
What does the rank column show?
The product's place and how many products the site ranks in that category, as "2nd of 41". The ordinal comes from Intl.PluralRules. The foot row says on how many of the sites the product is in the top three.
Related
- Pro
Rating Stars Awards
Rankings and scoresFour 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.
- Pro
Re-ranking Leaderboard Awards
Rankings and scoresA ranked table of seven comparison tools in an index, with the site's own row in a ring, a segmented control that ranks it again by overall score, ease of use or support, and a methodology note that folds open.
- Pro
Category Top Three Awards
Rankings and scoresFive software categories in cells on shared hairlines, each a small top three with the product's own row in a ring, a read-only rating in stars and words, and the word Leader on the categories it won.
- Pro
Customer Choice Seal Awards
Badges and sealsA split with a drawn satisfaction seal showing the score as text, beside a headline and a cloud of praise topics as outline badges whose size and border step with each topic's share of the most praised.
- Pro
Edition Comparison Awards
Lists and tablesA table by category for a usage-billing API comparing its placement at two editions of an awards programme, each row reading 7th to 3rd with an arrow, the places gained in words, a filled dot on a win and a total row.
- Pro
Rating Breakdown Reviews
Score summariesA review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.