A ranked list that shows labeled items with proportional progress bars for visualizing metrics, scores, and top performers in dashboards.
"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>
);
}
Part of Intent UI — browse the full library on 21st.dev.