Leaderboard

Pro

Ranked list with an optional top-three podium, promotion and demotion lines and a pinned “you” row. When you overtake someone, your row rises as theirs steps down.

Preview

Installation

npx @lumioui/cli add pro/leaderboard

Usage

import { Leaderboard } from "@/components/ui/leaderboard/leaderboard";
<Leaderboard />

Examples

Club

A running club's distance board.

League

A weekly practice league.

API reference

Prop Type Default
entries* LeaderboardEntry[] —
currentUserId string

Id of the viewer — their row is highlighted and pinned when off-list.

 —
podium boolean

Lift ranks 1–3 onto a podium above the list. Default false.

 false
maxRows number

Rows shown in the list (after the podium). Default all.

 —
pinCurrentUser boolean

Pin the current user's row under the list when it is beyond maxRows. Default true.

 true
formatScore (score: number) => string

Formats the score. Default locale-grouped integer.

 defaultFormat
scoreUnit string

Unit after the score — "XP", "km".

 —
promoteCount number

Top N ranks promote — a divider is drawn under them.

 —
demoteCount number

Bottom N ranks demote — a divider is drawn above them.

 —
promoteLabel string

Divider copy. Defaults "Moving up" / "Moving down".

 "Moving up"
demoteLabel string "Moving down"
showMovement boolean

Show ▲/▼ rank movement after scores change. Default true.

 true
onEntryPress
(entry: LeaderboardEntry … (entry: LeaderboardEntry, rank: number) => void

Row tap — open a profile. Rows are static when omitted.

 —
className string —