Components•Leaderboard
Components•Leaderboard
Leaderboard
A ranked leaderboard with rank movement, score against the leader and win streaks. Rows glide to their new places when the period changes, and your own row stays pinned to the bottom while it is scrolled out of view.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/leaderboard-tableHow to use
import { LeaderboardTable, type LeaderboardEntry,} from "@/components/bjork-ui/tables/leaderboard-table";const entries: LeaderboardEntry[] = [ { id: "p01", handle: "quietfox", team: "Harbor · EU West", score: 18420, previousRank: 1, winRate: 0.76, streak: 3 }, { id: "p14", handle: "driftwood", team: "Harbor · NA West", score: 11480, previousRank: 14, winRate: 0.55, streak: 2 },];<LeaderboardTable entries={entries} currentUserId="p14" defaultPeriod="month" onPeriodChange={(period) => refetch(period)}/>
Season 4 ladder
16 players · month
| Rank | ChangeRank change | Player | Points | Win rate | Streak |
|---|---|---|---|---|---|
| 1 | —No change | QUquietfoxHarbor · EU West | 18,420, 100% of the leader | 76.0% | W33 win streak |
| 2 | ▲1Up 1 place | KEkestrel9Kestrel · APAC | 17,865, 97% of the leader | 73.0% | L11 loss streak |
| 3 | ▼1Down 1 place | LAlune.ashKestrel · NA East | 17,310, 94% of the leader | 78.0% | W77 win streak |
| 4 | ▲2Up 2 places | TVt.vargaNinefold · EU Central | 16,902, 92% of the leader | 70.0% | W22 win streak |
| 5 | ▼1Down 1 place | RIr.ilungaKestrel · Africa | 15,744, 85% of the leader | 67.0% | L22 loss streak |
| 6 | ▼1Down 1 place | BRbrindleSaltmarsh · NA West | 15,120, 82% of the leader | 69.0% | W55 win streak |
| 7 | —No change | NKnori.kNinefold · APAC | 14,655, 80% of the leader | 64.0% | L11 loss streak |
| 8 | ▲4Up 4 places | ORokapi_runsHarbor · Africa | 14,212, 77% of the leader | 62.0% | W22 win streak |
| 9 | ▼1Down 1 place | FEfernwhistleSaltmarsh · APAC | 13,870, 75% of the leader | 63.0% | W11 win streak |
| 10 | ▼1Down 1 place | PEpebbleworksHarbor · NA East | 13,402, 73% of the leader | 59.0% | L33 loss streak |
| 11 | ▼1Down 1 place | IPivo.petrakKestrel · EU Central | 12,955, 70% of the leader | 56.0% | L11 loss streak |
| 12 | ▲3Up 3 places | HDhalcyon_dSaltmarsh · EU West | 12,611, 68% of the leader | 70.0% | W44 win streak |
| 13 | ▼2Down 2 places | SAs.amadiNinefold · Africa | 12,240, 66% of the leader | 60.0% | W33 win streak |
| 14 | ▲2Up 2 places | MLmoth_lanternNinefold · NA East | 11,906, 65% of the leader | 57.0% | W11 win streak |
| 15 | ▼1Down 1 place | DRdriftwoodYouHarbor · NA West | 11,480, 62% of the leader | 55.0% | W22 win streak |
| 16 | ▼3Down 3 places | COc.oyelaranSaltmarsh · Africa | 10,932, 59% of the leader | 51.0% | L22 loss streak |