Leaderboard
Pro
Rows that re-rank themselves with a layout animation and show who moved up or down.
- 1nova_dev·4,200
- 2pixelpush·3,890
- 3You·3,600
- 4ramen.js·3,580
- 5kikofolio·3,270
Customize
5
Highlight you
Installation
Leaderboard is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy leaderboard.tsx into components/ui and run npm install motion.
Usage
import { Leaderboard } from "@/components/ui/leaderboard";
<Leaderboard
players={[
{ id: "a", name: "nova_dev", score: 4210 },
{ id: "me", name: "You", score: 3720, isYou: true },
]}
previousRanks={lastRanks}
/>Props
3 properties| Property | Type | Default | Description |
|---|---|---|---|
| players | LeaderboardPlayer[] | — | Players with id, name, score and an optional isYou flag. |
| previousRanks | Record<string, number> | {} | Ranks before the last change, keyed by player id. |
| className | string | — | Extra classes for the list. |
Dependencies: motion