Spark UI
Back to UI Kit

Rank Shuffle

A live leaderboard that re-sorts itself every few seconds, with rows sliding into their new ranks.

Interactive Stage Preview

Customize

7 options
Accent Color
Entries
5
Rounds
4
Round Interval
2.4
Bar Height
20
Scores
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add rank-shuffle

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
entriesnumber5Number of rows on the leaderboard.
roundsnumber4Number of score rounds to cycle through.
intervalnumber2.4Seconds between each reshuffle.
barHeightnumber20Height of each score bar in pixels.
showScoresbooleantrueShow the numeric score beside each bar.
speednumber100Playback speed of entry and transition animations, as a percentage.