Leaderboard Composition
A ranked list. Server-safe, and an <ol> — the ranking is a fact a screen reader reads out, not a
column of numbers it has to infer from the layout.
Usage
- Ada Putri12 modules▲22,480
- Rio Hakim11 modules▼12,150
- Sarah Chen10 modules1,990
- Benedict JYou9 modules1,840
- Citra Dewi8 modules1,610
Do
Mark the viewer's own row with you, wherever it sits — finding yourself is the point of a leaderboard.
Don't
Use medal tints on a plain ranked table; gold on row one implies a competition that may not exist.
Loading
Leaderboard.Skeleton renders the same row geometry, so the panel keeps its height while the
ranking loads.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| entries | LeaderboardEntry[] | — | id, name, score, plus optional avatarSrc, detail, delta, you, hue. Order is the ranking. |
| label | string | — | Required accessible name for the list. |
| medals | boolean | true | Tints the top three. Turn it off for a neutral ranking. |
| entry.score | ReactNode | — | Already formatted — the library does not decide what a score looks like. |