Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Rating Stars Awards Block for React

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.

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

Star ratings from four review sites for React with Base 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.

What changes on a phone?

The four cells become two by two and the stars shrink a little. Nothing scrolls sideways at 320 pixels.

Are these review sites real?

No. Ysolde and the four sites are made up, and so are the ratings and counts. Only show a rating you can point to, with a link to where it can be seen.

  • Pro

    Platform Rankings Awards

    Rankings and scores

    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.

  • Pro

    Customer Choice Seal Awards

    Badges and seals

    A 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

    Category Top Three Awards

    Rankings and scores

    Five 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

    Rating and Laurels Trust Bar Awards

    Strips and banners

    One trust line: a read-only rating with its score and review count, three small laurels with their awards, and a ghost link to all the recognition.

  • Pro

    Rating Breakdown Reviews

    Score summaries

    A 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.

  • Pro

    With Rating Testimonials

    Collect a review

    One large customer quote over a closing band you can rate in: choose stars and the average and the rating count change on the spot, with a note that nothing is saved.

All 137 awards blocks