shadcn.io is not affiliated with official shadcn/ui
Ranked List Leaderboard Stats Block for Svelte
A six-row ranking in a hairline frame with a Week and Month switch that re-ranks the table: a large numeral and a quiet tint for the leader, and points that roll to their new numbers.
Installation
Overview
A ranked list for Svelte with Ark UI. A start-aligned header has a Week and Month switch at its end and, under the frame, a polite line that says who leads and by how much. Under it, one hairline frame with + marks on its corners holds the top six members of a weekly challenge app. The leader's row is the one that stands out: a numeral three times the size of the others and a quiet tint behind the row. Switching the period swaps the data set and the table re-ranks: a row is a place on the table, not a person, so the six rows stay where they are while their names change and their points roll to the new numbers. Each period's order is worked out from typed points when the module loads, so the ranks, the order and the "leads by" line always agree. For a leaderboard with a time window: the week against the month, today against the season.
FAQ
How do I add a period such as Quarter?
Add an entry to PERIODS and one number to the done and points arrays of every member in MEMBERS, in the same order. The tables are built from them when the module loads. Then widen the switch (grid-cols-2 becomes grid-cols-3). Name a period by what it is ("This quarter"), never by a date.
How does the list re-rank?
Each period has its own sorted table. The rows are keyed by their place, not by the member, so a row never moves: its name and its subtitle change, and its points roll from one number to the next. There is no reordering animation to tune and no layout shift, and with reduced motion the numbers change in place.
How does the switch work, and is it announced?
It is the catalog's Segment Group, a single-choice control with arrow-key movement between its segments, wired to one piece of state. The line under the frame is a polite live region that reads "This month, Idris Kamau leads by 230 points" once when the period changes; the six rows are not read out one by one. The line reserves two lines on a phone so nothing moves.
Why is the leader's row different?
A ranking is read from the top: a bigger numeral and a quiet tint make the leader the anchor without a medal, a crown or a colour. The row is always the first place, so the highlight stays put when the period changes. The tint is the theme's muted colour at 40%, so it follows every preset, light or dark.
Is it accessible?
The table is an ordered list named for the period ("Top 6, this week"), each row reads as its rank, name, challenges done and points, and the points are digits that roll to the final number with a text copy for assistive technology. Values sit in bdi elements so right-to-left pages keep them intact. With reduced motion the digits change in place.