Leaderboard Podium

Cards 230

About

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

Code

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

Usage.tsx

import { LeaderboardPodium } from "@/components/ui/leaderboard-podium"

export default function DemoOne() {
  return (
    <LeaderboardPodium
      rankings={[
        { userId: "1", userName: "Ava Elizabeth Turner", rank: 1, value: 2500, avatarUrl: "https://cdn.21st.dev/assets/mirror/14/14ac138dac42b67cef53c9bade870af020f595faebeef9bb1490859c65279228.jpg" },
        { userId: "2", userName: "Leo Harrison", rank: 2, value: 2200, avatarUrl: "https://cdn.21st.dev/assets/mirror/cc/cc39a907b13e3ed9f338da9d7ed985467345d8b1b87d5fb03621593c7d67abb7.jpg" },
        { userId: "3", userName: "Rowan Elijah", rank: 3, value: 1800, avatarUrl: "https://cdn.21st.dev/assets/mirror/4f/4f10eed377c49820b9b380883dc0586353324aa4af0be38c8326b4ef22ad1128.jpg" },
      ]}
    />
  )
}