Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/trophyso/leaderboard-rankingsimport { 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://i.pravatar.cc/96?img=32", displayed: true },
{ userId: "u-2", rank: 2, userName: "Leo Harrison", byline: "Level 39 – Platinum", value: 251800, avatarUrl: "https://i.pravatar.cc/96?img=12", displayed: true },
{ userId: "u-3", rank: 3, userName: "Rowan Elijah", byline: "Level 37 – Platinum", value: 238300, avatarUrl: "https://i.pravatar.cc/96?img=15", displayed: true },
{ userId: "u-4", rank: 4, userName: "Mia Sophia Bennett", byline: "Level 34 – Gold", value: 221700, avatarUrl: "https://i.pravatar.cc/96?img=44", displayed: true },
{ userId: "u-5", rank: 5, userName: "William Turner", byline: "Level 33 – Gold", value: 199500, avatarUrl: "https://i.pravatar.cc/96?img=53", displayed: true },
]}
/>
</div>
)
}