Leaderboard

Dashboards 1

About

A ranked list that shows labeled items with proportional progress bars for visualizing metrics, scores, and top performers in dashboards.

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

"use client";

import {
  Leaderboard,
  LeaderboardContent,
  LeaderboardEnd,
  LeaderboardItem,
  LeaderboardStart,
} from "@/components/ui/leaderboard";

const data = [
  { name: "Documentation", visits: 1200 },
  { name: "Components", visits: 980 },
  { name: "Themes", visits: 760 },
  { name: "Colors", visits: 430 },
  { name: "Icons", visits: 150 },
  { name: "Templates", visits: 150 },
  { name: "Plus", visits: 150 },
];

export default function LeaderboardDemo() {
  const max = Math.max(...data.map((d) => d.visits));
  return (
    <Leaderboard className="w-full max-w-sm">
      <LeaderboardContent>
        {data.map((item) => (
          <LeaderboardItem key={item.name} value={item.visits} maxValue={max}>
            <LeaderboardStart>{item.name}</LeaderboardStart>
            <LeaderboardEnd>
              {item.visits.toLocaleString()} visits
            </LeaderboardEnd>
          </LeaderboardItem>
        ))}
      </LeaderboardContent>
    </Leaderboard>
  );
}