Command Palette

Search for a command to run...

Upstash/Upstash Leaderboard

Upstash Leaderboard

Ranked leaderboard display for Redis sorted sets (ZSET) with positions, scores, and avatars.

Open in v0Open in

Top Players

Points
Alice ChenAlice Chen15,847
2
B
Bob Smith14,523
3
Carol WhiteCarol White13,891
4
D
David Brown12,456
5
Eve JohnsonEve Johnson11,234
+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-leaderboard

Usage

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

PropTypeDefaultDescription
entriesLeaderboardEntry[]-Array of entries
titlestring"Leaderboard"Header title
showRankbooleantrueShow rank numbers
maxEntriesnumber10Max entries to display
scoreLabelstring"Score"Score column label
scoreFormat(score: number) => string-Custom score formatter
classNamestring-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