shadcn.io is not affiliated with official shadcn/ui
Category Top Three Awards Block for React
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.
Installation
Overview
A category-by-category ranking for React with Base UI. Five cells on shared hairlines, one each for CRM, Analytics, DevTools, Design and Communication, each hold a small top three from a made-up index, listed by score, with the company's own product in a ring, a read-only rating in stars and words under it, and the word "Leader" in a pill on the categories where it came first. The places, the pills and the counts in the header ("top three in 5 of 5 categories, leader in 2") are worked out from one typed list of scores. Three cells across, then two, then one on a phone. It's built from Guides and Rating. The index, the products and the scores are made up for the example.
FAQ
How do I change the categories and scores?
Edit CATEGORIES at the top of the file: each category has a name and three entries, each with a name, a score out of 5 to one decimal and ours for the product that gets the ring. The order of each list, the Leader pill and the header counts are worked out from the scores, so list them in any order.
When does a category show Leader?
When the company's own product has the highest score in that category. Nothing is typed: change a score and the pill moves. The header counts how many categories have it and in how many the product is in the top three.
What happens when two scores are equal?
They are listed A to Z by name. The rank shown is the position in the list, so a tie never shows two products in the same place.
Why does the grid change shape?
Five does not divide into two or three evenly. On a wide screen the first three cells share the first row and the last two the second, each wider, so the rows always fill the width; on a tablet the last cell spans both columns, and on a phone every cell is a row.
Related
- 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
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 Grid Awards
Cards and gridsSixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.
- 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
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
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.