Top Players
2
B
Bob Smith14,5233
4
D
David Brown12,4565
+2 more entries
Overview
Display Redis ZSET data as a ranked leaderboard. Features gold/silver/bronze styling for top 3, avatar support, and customizable score formatting.
Installation
npx shadcn@latest add @elements/upstash-leaderboardUsage
import { UpstashLeaderboard } from "@/components/elements/upstash/upstash-leaderboard";
const entries = [
{ id: "1", name: "Alice", score: 15847 },
{ id: "2", name: "Bob", score: 14523 },
{ id: "3", name: "Carol", score: 13891 },
];
export function GameLeaderboard() {
return (
<UpstashLeaderboard
entries={entries}
title="Top Players"
scoreLabel="Points"
maxEntries={10}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
entries | LeaderboardEntry[] | - | Array of entries |
title | string | "Leaderboard" | Header title |
showRank | boolean | true | Show rank numbers |
maxEntries | number | 10 | Max entries to display |
scoreLabel | string | "Score" | Score column label |
scoreFormat | (score: number) => string | - | Custom score formatter |
className | string | - | Additional CSS classes |
LeaderboardEntry
interface LeaderboardEntry {
id: string;
name: string;
score: number;
avatar?: string;
highlight?: boolean;
}Features
- Gold/silver/bronze styling for top 3
- Crown icon for #1
- Avatar support with fallback initials
- Highlight current user
- Custom score formatting
- "+N more" indicator for overflow