shadcn.io is not affiliated with official shadcn/ui
Leaderboard Carousel Block for Radix UI
A twelve-player team leaderboard in a vertical track of five rows with ranks that share ties, move words like Up 2, and a Jump to my rank button that brings the visitor's row into view, marks it and shows the gap to the next place.
Installation
Overview
Let a long ranking stay short and still find you, with this leaderboard carousel for React with Radix UI. Scoreholt, a team challenge app, ranks twelve players in a vertical track that shows five rows and moves one row at a time. A row is a rank, an initials avatar, a name, a score in tabular figures and the move since last week as an arrow and words ("Up 2", "Level"). You are ninth, below the first five rows: "Jump to my rank", the block's one Shine Button, moves the track so your row is in view, tints it and puts focus on it. A side cell at the end shows your place, your score and the gap to the next place ("26 points behind Idris"), all derived from the typed scores, with ties sharing a rank. Up and Down buttons and the arrow keys move the track, and the foot says which places are in view. On a phone your standing stacks under the track. The ruled bands come from Guides. It is built from Carousel, Avatar, Shine Button, Button and Guides, with CSS transitions only. The players and scores are made up.
FAQ
How do I use my own scores?
Edit PLAYERS, in score order, and mark the visitor's row with you: true. Ranks, ties, the gap to the next place and the jump target are derived from the scores, and AS_OF sets the week the board ends on. Replace the typed list with your own standings, sorted by score.
What does Jump to my rank do?
It moves the track so your row sits in the middle of the five in view, tints the row and moves focus to it, and the foot says "Your row: place 9 of 12". Moving the track by hand afterwards clears the sentence.
Embla scrolls to the same snap point; the block follows Embla's select event.
How are ties ranked?
Two players with the same score share a place and the next place is skipped (1, 2, 3, 4, 4, 6), which is how most leaderboards read. Change rankOf if you prefer dense ranking.
How does it work with a keyboard?
Tab reaches the jump button, then Up and Down. With focus inside the track the arrow keys move one row and Home and End jump to the ends. Rows out of view are hidden from the tab order and from screen readers; the jump moves focus to your row once it is in view.