shadcn.io is not affiliated with official shadcn/ui
Re-ranking Leaderboard Awards Block for React
A 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.
Installation
Overview
A ranked leaderboard for React with Base UI. A table lists seven comparison tools from a made-up index with each one's rank, score and a bar for it, and the site's own tool in a ring. A segmented control re-ranks the same seven by Overall, Ease of use or Support: the rows re-order, every score and bar follows, and the last column says how many places each tool gained or lost against the overall order, as an arrow, a signed number and a word. A methodology note under the table folds open. The overall score is the mean of three scores, and ranks, moves and the sentence in the header are all worked out from one typed list. On a phone the bars drop out and the table keeps four short columns. It's built from Guides, SegmentGroup, Collapsible, a native table and Lucide icons. The index, the tools and the scores are made up for the example.
FAQ
How do I change the tools and their scores?
Edit TOOLS at the top of the file: each tool has a coverage, an ease and a support score from 0 to 100, a name, and ours for the row that gets the ring. The overall score, every order, the ranks, the moves and the header sentence are worked out from them, so nothing else needs a change.
How is the overall score worked out?
It is the mean of the three scores, rounded to one decimal. Two tools with the same score are listed A to Z, and the methodology note under the table says so. Change overallOf if you weight the three differently.
What does the last column mean?
The number of places a tool gains or loses against the overall order, shown as an arrow, a signed number and a word ("up 3", "down 2", "same"). Under Overall every tool is the same, since that is the baseline. Nothing relies on colour: the arrow, the sign and the word each carry it.
Is the control keyboard friendly?
Yes. It is a segmented control with one tab stop: the arrow keys move between Overall, Ease of use and Support and choose as they go, and a polite status line says which ranking is showing. The table has a fixed height, so the page does not move when the rows re-order.
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
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
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
Trend Arrows Awards
Lists and tablesA ruled table for an investing app comparing five award measures this year and last year, with the change as an arrow icon and words (up 4, flat, down 1) so a change is never told by colour alone.
- 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.
- 213Pro
Three Step Podium Awards
Rankings and scoresA podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.