Overview
LeaderboardList displays a ranked list of items with optional avatars, trend indicators, and navigation. Perfect for top contributors, most active users, or any ranked data.
Features
- Medal badges for top 3 positions
- Trend indicators (up, down, same)
- Avatar support with fallback initials
- Expandable list with show more/less
- Custom value formatting
- Click handlers for drill-down navigation
Examples
Basic Leaderboard
With rank badges and trends
Top Contributors
By insight count
SC
Sarah Chen
142
AR
Alex Rivera
128
JK
Jordan Kim
115
4
MLMorgan Liu
98
5
CPCasey Park
87
Expandable List
With show more/less toggle
All Contributors
SC
Sarah Chen
142
AR
Alex Rivera
128
JK
Jordan Kim
115
4
MLMorgan Liu
98
5
CPCasey Park
87
Minimal Style
Compact without avatars
Top Projects
Sarah Chen
142
Alex Rivera
128
Jordan Kim
115
4
Morgan Liu
98
5
Casey Park
87
No Trends
Without trend indicators
Rankings
SC
Sarah Chen
142
AR
Alex Rivera
128
JK
Jordan Kim
115
4
MLMorgan Liu
98
5
CPCasey Park
87
Custom Formatting
With custom value formatter
Top Performers
Revenue generated
SC
Sarah Chen
$14,200
AR
Alex Rivera
$12,800
JK
Jordan Kim
$11,500
4
MLMorgan Liu
$9,800
5
CPCasey Park
$8,700
Numbers Only
Numbers only
Scores
1
Sarah Chen
142
2
Alex Rivera
128
3
Jordan Kim
115
4
Morgan Liu
98
5
Casey Park
87
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | LeaderboardItem[] | required | Array of ranked items |
maxItems | number | 10 | Max items before expand toggle |
showRankBadge | boolean | true | Show medal badges for top 3 |
showTrend | boolean | true | Show trend indicators |
showAvatar | boolean | true | Show avatars |
valueFormat | function | - | Custom value formatter |
onItemClick | function | - | Click handler for items |
Usage
import { LeaderboardList, ChartCard } from '@/ui/components/charts';
// Basic leaderboard
<ChartCard title="Top Contributors">
<LeaderboardList
items={[
{ id: '1', rank: 1, label: 'Sarah Chen', value: 142, trend: 'up' },
{ id: '2', rank: 2, label: 'Alex Rivera', value: 128, trend: 'same' },
{ id: '3', rank: 3, label: 'Jordan Kim', value: 115, trend: 'down' },
]}
/>
</ChartCard>
// With avatars and click handler
<LeaderboardList
items={leaderboardData}
showAvatar
showRankBadge
showTrend
onItemClick={(item) => router.push(`/users/${item.id}`)}
/>
// Custom value formatter
<LeaderboardList
items={revenueLeaders}
valueFormat={(value) => `$${value.toLocaleString()}`}
/>