Leaderboard Rankings

Component 111

About

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

Code

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

Usage.tsx

import { LeaderboardRankings } from "@/components/ui/leaderboard-rankings"

export default function DemoOne() {
  return (
    <div className="w-full px-6">
      <LeaderboardRankings
        rankings={[
          { userId: "u-1", rank: 1, userName: "Ava Elizabeth Turner", byline: "Level 42 – Diamond", value: 289400, avatarUrl: "https://cdn.21st.dev/assets/mirror/14/14ac138dac42b67cef53c9bade870af020f595faebeef9bb1490859c65279228.jpg", displayed: true },
          { userId: "u-2", rank: 2, userName: "Leo Harrison", byline: "Level 39 – Platinum", value: 251800, avatarUrl: "https://cdn.21st.dev/assets/mirror/cc/cc39a907b13e3ed9f338da9d7ed985467345d8b1b87d5fb03621593c7d67abb7.jpg", displayed: true },
          { userId: "u-3", rank: 3, userName: "Rowan Elijah", byline: "Level 37 – Platinum", value: 238300, avatarUrl: "https://cdn.21st.dev/assets/mirror/4f/4f10eed377c49820b9b380883dc0586353324aa4af0be38c8326b4ef22ad1128.jpg", displayed: true },
          { userId: "u-4", rank: 4, userName: "Mia Sophia Bennett", byline: "Level 34 – Gold", value: 221700, avatarUrl: "https://cdn.21st.dev/assets/mirror/6e/6e4312a689f16581c3fe3e224679a9d5be8cd607c7bcbaaa08a118d670889927.jpg", displayed: true },
          { userId: "u-5", rank: 5, userName: "William Turner", byline: "Level 33 – Gold", value: 199500, avatarUrl: "https://cdn.21st.dev/assets/mirror/e0/e0525c93644b8eb3f5fcf0e4265dea50b8fa5b1f7e5d3c92b699fb916957e844.jpg", displayed: true },
        ]}
      />
    </div>
  )
}