Shadcn UI Leaderboard Block
Leaderboard3 is a ranked list card showing items with trend indicators. Each row displays a circular rank badge, name, value, and a trend icon with optional change amount. Trends are color-coded green for up, red for down, and muted for unchanged.
Light card surface with rank badges using muted backgrounds. Names are medium weight on the left side. Values and trends are right-aligned. The trend indicators use semantic colors matching other dashboard patterns. Change amounts appear next to the trend icon when provided. Rows use flexbox with space-between alignment.
This leaderboard adds temporal context showing whether items are improving or declining. Useful for tracking sources, channels, or categories where movement matters. The trend indicators help users quickly spot which items need attention. A practical pattern for marketing and analytics dashboards.
The change field supports three states: up, down, and same. The changeAmount is optional and can show absolute or percentage changes.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
card @shadcn | Registry |