Leaderboard Card
Compact card showing user avatar, name, amount and a progress score with rank/crown.
Examples
First place
Alex Brooks
$8,034Score90%
Second place
Maya Rodriguez
$7,040Score80%
Installation
npx shadcn-extras@latest add leaderboard-card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | Display name | |
| amount | number | string | Main amount. If number, it’s formatted with amountPrefix. | |
| amountPrefix | string | $ | Prefix when formatting numeric amount |
| avatarSrc | string | Avatar image URL | |
| avatarAlt | string | name | Alt text |
| rank | number | Small circular badge bottom‑right of avatar | |
| showCrown | boolean | rank===1 | Shows crown above avatar |
| score | number | 0 | Progress 0–100 |
| label | string | "Score" | Left label above progress bar |
| tone | 'emerald' | 'blue' | 'zinc' | 'emerald' | Theme palette |
| size | 'sm' | 'md' | 'lg' | 'md' | Density |
| avatarRingClassName | string | Custom avatar ring/outline class | |
| progressClassName | string | Custom progress fill class | |
| pillClassName | string | Custom class for amount pill | |
| className | string | Wrapper classes |