shadcn.io is not affiliated with official shadcn/ui
Re-ranking Leaderboard Awards Block for Svelte
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 Svelte with Ark 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.