Components
Loading preview...
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.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-leaderboard"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>
);
}