排行榜頒獎台
前三名頒獎台柱升起+其餘名次列表進場的排行榜。
進場時三根頒獎台柱依「亞軍 → 冠軍 → 季軍」的順序 spring 升起，頂部漸層頭像與分數滾動累加，冠軍最後彈出皇冠；第 4 名之後以列表逐項滑入，並附相對冠軍分數的比例色條，適合積分挑戰、業績競賽等排名場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
128
8
<LeaderboardPodium />
安裝
npx shadcn@latest add https://webberui.com/r/leaderboard-podium.json或在 components.json 設定 registries 後，改用 @webberui/leaderboard-podium 安裝。
安裝依賴後，從 registry JSON（/r/leaderboard-podium.json 的 files[0].content）複製 leaderboard-podium.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { LeaderboardPodium } from "@/components/ui/leaderboard-podium";
const entries = [
{ name: "陳柏睿", score: 9840, hue: 262 },
{ name: "林小滿", score: 9215, hue: 340 },
{ name: "張雅婷", score: 8790, hue: 200 },
{ name: "王志豪", score: 8420, hue: 150 },
];
<LeaderboardPodium entries={entries} unit="分" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
entries | LeaderboardEntry[] | — | 排行榜資料，會自動依 score 由高至低排序 |
unit | string | "分" | 分數後綴的單位文字 |
podiumHeight | number | 128 | 冠軍柱高度（px），亞軍與季軍柱依比例遞減 |
maxVisible | number | 8 | 最多顯示的名次數（含前三名） |
className | string | — | 透傳到最外層容器 |
LeaderboardEntry 欄位：
| 欄位 | 型別 | 說明 |
|---|---|---|
name | string | 顯示名稱，頭像會取第一個字元作為縮寫 |
score | number | 分數，用於排序、滾動累加與比例色條 |
hue | number | 頭像漸層色相（0–360），讓每位成員有可辨識的顏色 |
可及性
- 完整名次以
sr-only有序清單（<ol>）提供給螢幕閱讀器逐項朗讀，動畫視覺層整體標記aria-hidden，避免朗讀到滾動中的中間數字 - 使用者系統開啟「減少動態效果」時，柱體、列表與皇冠皆直接呈現最終狀態，分數立即顯示不做累加動畫
- 名次不只依賴顏色區分：前三名柱體內有明確的數字與「冠軍／亞軍／季軍」文字標籤，列表每列都有數字名次
- 分數使用
tabular-nums等寬數字，滾動累加時版面不抖動