# Leaderboard 1 - Leaderboard with Progress Bars

> A ranked list card with progress bars showing relative values for each item.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/leaderboard1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/leaderboard1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/leaderboard1-light-49a14a8af423b5cb.png
- Registry item: https://shadcnblocks.com/r/leaderboard1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/leaderboard1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`
- Registry items: `card`, `progress`

## Files

### `block/leaderboard1/leaderboard1.tsx`

```tsx
import { cn } from "cn";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
interface LeaderboardItem {
  name: string;
  value: number;
  maxValue?: number;
}

interface Leaderboard1Props {
  title?: string;
  description?: string;
  items?: LeaderboardItem[];
  valuePrefix?: string;
  className?: string;
}

const defaultItems: LeaderboardItem[] = [
  { name: "United States", value: 4520 },
  { name: "United Kingdom", value: 3210 },
  { name: "Germany", value: 2890 },
  { name: "France", value: 1890 },
  { name: "Canada", value: 1240 },
];

const Leaderboard1 = ({
  title = "Top Countries",
  description = "Visitors by country",
  items = defaultItems,
  valuePrefix = "",
  className,
}: Leaderboard1Props) => {
  const maxValue = items[0]?.value || 1;

  return (
    <Card className={cn("w-full max-w-2xl", className)}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {items.map((item, index) => (
          <div key={index} className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="font-medium">{item.name}</span>
              <span className="text-muted-foreground">
                {valuePrefix}
                {item.value.toLocaleString()}
              </span>
            </div>
            <Progress value={(item.value / maxValue) * 100} className="h-2" />
          </div>
        ))}
      </CardContent>
    </Card>
  );
};

export { Leaderboard1 };
```