A ranked list with medals for the top three, proportional score bars that grow in, rank change arrows and a pinned row for the current user.
npx shadcn@latest add https://hyperblur.dev/r/leaderboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/leaderboard.tsx.
import { Leaderboard } from "@/components/hyperblur/leaderboard"
<Leaderboard topN={5} unit="pts" />| Prop | Type | Default | Description |
|---|---|---|---|
| entries | { id: string; name: string; score: number; change?: number; you?: boolean }[] | defaultLeaders | Scored entries in any order. They are sorted by score. change is the number of places gained (positive) or lost (negative). you marks the current user. |
| topN | number | 5 | How many ranks to show. If the current user ranks lower, their row is pinned below a divider. |
| unit | string | "pts" | Unit shown after each score. Pass an empty string to hide it. |
| accent | string | "#2f7bff" | Bar color and the highlight on the current user's row. |
| onSelect | (entry: LeaderboardEntry, rank: number) => void | When provided, rows become buttons and call this with the entry and its rank. |