shadcn.io is not affiliated with official shadcn/ui
Movement Leaderboard Stats Block for Radix UI
A league table with rank movement for eight clubs: an arrow, a word and a number (Up 4) and the two places as microcopy (7 to 3), with the biggest climber and the biggest faller beside it.
Installation
Overview
A league table with movement for React with Radix UI. A split gives the start column to the header ("Brindle Hill RC climbed 4 places") and a dl of two facts, the biggest climber and the biggest faller, each with the club, the move and the two places. The end column, across a divider, is a band of eight rows that runs to the rail and ends the block: a mono rank, the club, the distance this week and, at the end, how its place moved since last week. A move is an arrow, a word and a number ("Up 4"), then the two places as microcopy ("7 to 3"); a club that did not move says "Level" and "Stayed 4", and a club that was not in the table has a "New" badge and "Entered at 7". Movement never relies on colour. Ranks, moves and both facts are worked out from the typed distances and last week's places when the module loads. For a league, a ladder, a chart or a search ranking that moves week to week.
FAQ
How do I change the clubs and last week's places?
Edit CLUBS: a name, the distance this week (km) and last week's place (before, or null for a club that was not in the table). The module sorts by distance, ranks the rows, works out each move from the two places, and picks the biggest climber and faller. Change the unit by editing the km text in the row and the header line.
Why aren't climbs green and falls red?
A change is told by its glyph and its words, so it reads the same for everyone and in every theme: an up arrow and "Up 4", a down arrow and "Down 3", a dash and "Level". There is no colour to decode, and the theme's foreground stays the only text colour.
How are the biggest climber and faller chosen?
They are the entries with the largest gain and the largest loss, among clubs that were in last week's table. A new entry has a shift of zero and never counts. If two clubs tie, the one higher in the table wins. If nobody gained a place the "climber" shows the first club with a shift of zero ("Level"), so you may want to hide the fact in that case.
Is it accessible?
The table is an ordered list named for the week. Each move is words, not a picture: "Up 4, 7 to 3" is read out, and the arrows are decorative. The two facts are a description list with the label first. Movements sit in bdi elements so the whole phrase keeps its order on right-to-left pages, and the rows never rely on colour.