Charts & Stats
v1.0.0Added in 1.0.0
A ranked list of people, teams or products by one metric: medals, proportional bars, rank changes, a podium and a pinned "you" row.
Read top to bottom: rank or medal, avatar, name, a bar that shows how far each one is from the leader, the value and the move since last period (a green ▲2, a red ▼1, a gray dash when nothing moved, a blue "New"). The first time it scrolls into view the bars grow and the values count up; when the numbers change, rows glide to their new place and the rank chips pop. With onItemClick every row is a button: Tab lands on the list once, Up / Down, Home / End and PageUp / PageDown move between rows, Enter opens one. "Show all" expands the rest; your own row stays pinned under the top rows with a gap when it falls outside the limit. On a phone rows are at least 44px, the value never truncates (the name does) and the podium keeps three columns down to 320px. Screen readers hear one sentence per row: "Rank 1, Daniel Reed, $48,921, up 1 place". Reduced motion shows the final state at once.
npx wingo-ui@latest add leaderboardPro item: the CLI needs a Pro account. See plans
Revenue in USD, September 2026
Tap a row or simulate a day of sales.
animated=true · defaultExpanded=false · currency="USD" · deltaFormat="percent" · invertTrend=false