Shadcn.io is not affiliated with official shadcn/ui
Stats Leaderboard With Score Bars
A ranked leaderboard stats card for React and Next.js with numbered rank columns, tabular-nums scores, and thin h-1.5 proportional score bars beneath each row scaled so rank one fills the full width and lower ranks shrink accordingly built with shadcn/ui and Tailwind CSS
Rank the top performers with this leaderboard stats card with proportional score bars for React and Next.js. Features a monospace rank column, primary row labels with optional sub-context, tabular-nums score values on the right, a thin h-1.5 rounded-full proportional score bar beneath each row where rank one fills 100 percent and lower ranks scale proportionally, and a two-zone silhouette of stacked rank rows divided by border-b dividers. Built with TypeScript, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for sales rep leaderboards, top product rankings, customer support agent standings, and referral program dashboards.
Related Components
React Stats Block Leaderboard Compact List
Compact ranked list
React Stats Block Leaderboard Ranked List
Classic ranked list
React Stats Block Leaderboard With Avatars
Leaderboard with avatars
React Stats Block Leaderboard With Delta
Leaderboard with delta column
React Stats Block Leaderboard With Trend Spark
Leaderboard with trend spark
React Stats Block Progress Bar List
List of progress bars
FAQ
Was this page helpful?
Sign in to leave feedback.
Leaderboard With Delta
A ranked leaderboard stats card for React and Next.js with monospace rank numbers, per-row rank-change indicators in semantic colors, tabular-nums scores, and a header showing the leader and total entries built with shadcn/ui and Tailwind CSS
Leaderboard With Trend Spark
A ranked leaderboard stats card for React and Next.js with monospace rank numbers, entity labels, inline h-8 ChartContainer sparklines showing per-row recent trend, and tabular-nums score columns built with shadcn/ui and Tailwind CSS