Upstash Leaderboard

Component 31

About

A ranked leaderboard display for Redis sorted sets with positions, scores, avatars, and gold/silver/bronze styling for the top three.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Upstash Leaderboard to your project and fits it to your theme.

Code

How Upstash Leaderboard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { UpstashLeaderboard } from "@/components/ui/upstash-leaderboard";

const entries = [
  {
    id: "1",
    name: "Sarah Chen",
    score: 15420,
    avatar: "https://cdn.21st.dev/assets/mirror/23/23faad2cb3788de8dae9e7797c90a11e9cac697bcfc9ae118086800842579aea.jpg",
  },
  {
    id: "2",
    name: "Marcus Lee",
    score: 14830,
    avatar: "https://cdn.21st.dev/assets/mirror/22/223a928c2398a28ed696d9ed7c4b9fb2e9f19955f04b982b13cd85aae1a1f253.jpg",
  },
  {
    id: "3",
    name: "Priya Sharma",
    score: 13990,
    avatar: "https://cdn.21st.dev/assets/mirror/50/50fb308e9a8ddec88673fbf286a7174ce7e139dd1041fcb39792ae27cc15f23e.jpg",
  },
  { id: "4", name: "You", score: 12750, highlight: true },
  {
    id: "5",
    name: "Diego Alvarez",
    score: 11200,
    avatar: "https://cdn.21st.dev/assets/mirror/b3/b36ca9959c3ac97d0eb9be717a26d714fb6133f1c9fa07b1cef6118ecc97e40e.jpg",
  },
  {
    id: "6",
    name: "Emma Wilson",
    score: 9840,
    avatar: "https://cdn.21st.dev/assets/mirror/5b/5bccf09544cbce4397a885db3234b99b3dc220a70dbb1b921058706aa056a371.jpg",
  },
  {
    id: "7",
    name: "Liam Novak",
    score: 8710,
    avatar: "https://cdn.21st.dev/assets/mirror/8c/8c2c5f479e1fa0790617b0ce38797ecd39effea8740401ae4ad6d4a225f50879.jpg",
  },
];

export default function UpstashLeaderboardDemo() {
  return (
    <div className="w-full max-w-md mx-auto p-4">
      <UpstashLeaderboard
        entries={entries}
        title="Top Players"
        scoreLabel="Points"
      />
    </div>
  );
}