8bit Leaderboard

Component

About

An 8-bit styled leaderboard block. Ranks players with retro avatars, scores, and rank badges, highlighting the current player, built on the retro card, badge, avatar, and separator primitives.

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

Code

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

Usage.tsx

"use client";

import Leaderboard from "@/components/ui/8bit-leaderboard";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <Leaderboard
        players={[
          {
            id: "1",
            name: "OrcDev",
            score: 125000,
            avatar: "/avatars/orcdev.jpeg",
            avatarFallback: "OD",
          },
          {
            id: "2",
            name: "Shadow Mage",
            score: 98500,
            avatarFallback: "S",
          },
          {
            id: "3",
            name: "Dragon Slayer",
            score: 87500,
            avatarFallback: "D",
          },
          {
            id: "4",
            name: "Fire Wizard",
            score: 76500,
            avatarFallback: "F",
          },
          {
            id: "5",
            name: "Retro Lover",
            score: 68500,
            isCurrentPlayer: true,
            avatarFallback: "Y",
          },
        ]}
        maxPlayers={5}
        showRank={true}
        showAvatar={true}
        currentPlayerId="5"
        className="w-full max-w-[500px]"
      />
    </div>
  );
}