Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Platform Rankings Awards Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A platform-by-platform ranking for Solid with Ark 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.

What changes on a phone?

The Rating and Reviews columns are hidden and their facts repeat under the site's name, so the table keeps the site and the rank and needs no sideways scroll.

Are these review sites real?

No. Tiebreak and all four sites are made up, and so are the ratings and counts. Replace them with the sites your product is listed on, and keep the numbers current: stale ratings do more harm than none.

All 137 awards blocks