shadcn.io is not affiliated with official shadcn/ui
Customer Choice Seal Awards Block for React
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.
Installation
Overview
A satisfaction seal for React with Base UI. A split on solid rails: at the start, in a hairline frame with + marks on its corners, a seal drawn in SVG with a scalloped edge, two rings and five small stars, and the score, "Customers' choice" and the year as text in the middle. At the end, behind a divider, the heading, a line that gives the score in words ("4.8 out of 5 from 4,812 verified customers") and names the programme that gave the seal, a cloud of praise topics, each an outline badge with its count and a weight (size, padding and border) stepped by its share of the most praised topic. Under them five bars show how many customers gave each star count. The score is worked out from the typed star counts and the weights from the typed topic counts. On a phone the seal comes under the text. It's built from Guides and Badge. The product, the survey and the figures are made up for the example.
FAQ
How do I change the score and the topics?
Edit RATINGS (how many verified customers gave each star count) and TOPICS (how many mentions each praised topic had) at the top of the file. The customer count, the score to one decimal, and each badge's weight are worked out from them.
How are the badge weights chosen?
Each topic's mentions are compared with the most-mentioned topic's: 80 per cent and up gets the largest badge, 50 per cent the next, 30 per cent the next and the rest the smallest. The count stays in each badge's text, so the weight only reinforces it.
Is the seal an image?
No. It is SVG drawn in the code: a scalloped edge built from points on a circle, two rings and five stars, in the foreground tone, so it follows the theme. It is hidden from assistive technology; a caption says the same thing in words.
How is it read by a screen reader?
The heading, then the sentence with the score and the customer count, then the topics as a list ("Ease of use, 312"), then the seal's caption. The drawing adds nothing the text lacks.
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
Platform Rankings Awards
Rankings and scoresA 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
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
Vote Results Bars Awards
Rankings and scoresHorizontal progress bars for six nominees sorted by votes, with a segmented control that swaps votes for share, a ringed winner row, a derived total and a fixed certification date.
- Pro
Trophy Hero Awards
One featured awardAn award as a hero for a voice platform: the headline, one sentence, a Shine Button and three judging figures beside a drawn trophy on a plinth with four category chips in front.
- 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.