Leaderboard Podium: Animated Top-3 Ranking (React)

A leaderboard whose top-three podium columns rise up while the remaining ranks reveal as a list.

On reveal, the three podium columns spring up in the order "runner-up → champion → third place", with gradient avatars on top and scores rolling up, and a crown popping out over the champion last; from fourth place onward the ranks slide in one at a time as a list, each with a proportional color bar relative to the champion's score — a good fit for point challenges, sales contests, and other ranking scenarios.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add leaderboard-podium.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Winner column heightpodiumHeight

128

Max ranks shownmaxVisible

Score unitunit

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<LeaderboardPodium/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/leaderboard-podium.en.json

Or, once registries are configured in components.json, install it as @webberui/leaderboard-podium.

Usage

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

const entries = [
  { name: "Chen Po-jui", score: 9840, hue: 262 },
  { name: "Lin Hsiao-man", score: 9215, hue: 340 },
  { name: "Chang Ya-ting", score: 8790, hue: 200 },
  { name: "Wang Chih-hao", score: 8420, hue: 150 },
];

<LeaderboardPodium entries={entries} unit="pts" />

Props

Prop	Type	Default	Description
`entries`	`LeaderboardEntry[]`	—	The leaderboard data, sorted automatically by `score` from high to low
`unit`	`string`	`"Points"` (points)	Unit text appended after the score
`podiumHeight`	`number`	`128`	Height of the champion's column (px); the runner-up and third-place columns step down proportionally
`maxVisible`	`number`	`8`	Maximum number of ranks to show (including the top three)
`className`	`string`	—	Forwarded to the outermost container

LeaderboardEntry fields:

Field	Type	Description
`name`	`string`	Display name; the avatar takes the first character as its initials
`score`	`number`	Score, used for sorting, for the rolling count, and for the proportional color bar
`hue`	`number`	Hue of the avatar gradient (0–360), giving each member a recognizable color

Accessibility

The complete ranking is provided to screen readers as an sr-only ordered list (<ol>) to be announced item by item, while the animated visual layer as a whole is marked aria-hidden, which avoids announcing the intermediate numbers mid-roll
When the user has "reduce motion" enabled at the system level, the columns, the list, and the crown all present their final state directly, and scores show immediately with no rolling animation
Rank is not conveyed by color alone: the top-three columns contain an explicit number plus a “Champion/Runner-up/Third Place” (champion / runner-up / third place) text label, and every row in the list carries a numeric rank
Scores use tabular-nums monospaced digits, so the layout does not jitter while they roll up

Leaderboard Podium