Shadcn UI Leaderboard Block
Leaderboard1 is a ranked list card showing items with progress bars indicating relative values. Each row displays a name on the left, value on the right, and a progress bar below. The progress bars are scaled relative to the top item which shows 100%.
Light card surface with progress bars using the default primary color. Names are medium weight while values are muted. The progress bar widths create an immediate visual ranking. Items are vertically stacked with consistent spacing. The first item always has a full progress bar as the reference point.
This is a simple, effective leaderboard pattern for showing top items with relative comparisons. The progress bars make it easy to see proportional differences at a glance. Useful for top countries, top products, top pages, or any ranked data. Clean implementation with shadcn-default styling.
The list works well with 5-10 items. Values can include optional prefixes like currency symbols. Progress percentages are calculated automatically from the data.
Dependencies
| Package | Type |
|---|---|
card @shadcn | Registry |
progress @shadcn | Registry |