# Leaderboard

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/leaderboard
```

## Import

```tsx
import { Leaderboard } from "@/components/ui/leaderboard/leaderboard";
```

## Variants

- `club` — Club: `npx @lumioui/cli add pro/leaderboard-club`
- `league` — League: `npx @lumioui/cli add pro/leaderboard-league`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `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. |
| `formatScore?` | `(score: number) => string` | Formats the score. Default locale-grouped integer. |
| `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". |
| `demoteLabel?` | `string` | — |
| `showMovement?` | `boolean` | Show ▲/▼ rank movement after scores change. Default true. |
| `onEntryPress?` | `(entry: LeaderboardEntry, rank: number) => void` | Row tap — open a profile. Rows are static when omitted. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/leaderboard