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

  1. Ada Putri12 modules▲22,480
  2. Rio Hakim11 modules▼12,150
  3. Sarah Chen10 modules1,990
  4. Benedict JYou9 modules1,840
  5. Citra Dewi8 modules1,610
tsx
<Leaderboard  label="Weekly leaders"  entries={[    { id: '1', name: 'Ada Putri', score: '2,480', detail: '12 modules' },    { id: '4', name: 'Benedict J', score: '1,840', you: true },  ]}/>

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

PropTypeDefaultNotes
entriesLeaderboardEntry[]—id, name, score, plus optional avatarSrc, detail, delta, you, hue. Order is the ranking.
labelstring—Required accessible name for the list.
medalsbooleantrueTints the top three. Turn it off for a neutral ranking.
entry.scoreReactNode—Already formatted — the library does not decide what a score looks like.