Leaderboard

Component

About

A ranked list of people by score, with ties sharing a rank, movement arrows since the last period, an optional top-three podium, and the current user pinned into view when they fall outside the visible range.

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

Code

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

Usage.tsx

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

const entries = [
  { id: "amara", name: "Amara Okafor", score: 184200 },
  { id: "jonas", name: "Jonas Weber", score: 176900 },
  { id: "lucia", name: "Lucía Romero", score: 151300 },
  {
    id: "kenji",
    name: "Kenji Sato",
    score: 142800,
    detail: "APAC",
    previousRank: 7,
  },
  {
    id: "grace",
    name: "Grace Liu",
    score: 142800,
    detail: "NA West",
    previousRank: 4,
  },
  {
    id: "noah",
    name: "Noah Bennett",
    score: 131000,
    detail: "NA East",
    previousRank: "new" as const,
  },
  {
    id: "fatima",
    name: "Fatima Zahra",
    score: 118400,
    detail: "EMEA",
    previousRank: 5,
  },
  {
    id: "oliver",
    name: "Oliver Hughes",
    score: 102900,
    detail: "UK&I",
    previousRank: 8,
  },
  { id: "priya", name: "Priya Nair", score: 95000, detail: "APAC" },
  { id: "marcus", name: "Marcus Webb", score: 82000, detail: "EMEA" },
  { id: "elena", name: "Elena Petrova", score: 74000, detail: "NA East" },
  { id: "you", name: "You", score: 61300, detail: "NA West", previousRank: 15 },
];

export default function LeaderboardDemo() {
  return (
    <div className="w-full max-w-md rounded-[var(--radius-card)] border border-[var(--color-line)] bg-[var(--color-surface)] p-5 shadow-[var(--shadow-card)] text-[var(--color-ink)]">
      <Leaderboard
        entries={entries}
        limit={8}
        podium
        currentUserId="you"
        unit="closed revenue"
        label="Sales leaderboard, by closed revenue"
        formatScore={(score) => `$${(score / 1000).toFixed(1)}K`}
      />
    </div>
  );
}