Stat List
A ranked/ordered list of statistics with optional progress bars, icons, and per-item colors. Perfect for leaderboards, top items, and category breakdowns.
Installation
$ npx shadcn@latest add @orecus/stat-listDependencies:
lucide-reactmotion
Registry:
skeleton@orecus/color-utils@orecus/card@orecus/header@orecus/progress@orecus/use-reduced-motion
Component
Ranked lists with optional bars, icons, and rankings.
Top Products
1
$12,400Widget Pro
2
$8,200Gadget X
3
$4,100Thing Y
4
$2,800Item Z
Categories
Sales by product category
Electronics
Clothing
Software
Ratings
1
68%5 Stars
2
22%4 Stars
3
7%3 Stars
4
2%2 Stars
5
1%1 Star
1
1250Alex Johnson
2
980Sarah Miller
3
875John Smith
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional title for the list |
description | ReactNode | — | Optional description for the list |
items* | StatListItem[] | — | Array of items with label, value, optional icon and color |
showRank | boolean | false | Show rank numbers |
showBar | boolean | true | Show progress bars |
maxValue | number | — | Maximum value for percentage calculation (auto-detected if not set) |
color | ThemeColor | 'primary' | Default color for bars |
action | ReactNode | — | Optional action in the header |
animated | boolean | true | Whether to animate the list items |
loading | boolean | false | Shows skeleton loading state |
cardProps | CardProps | — | Props to pass to the Card wrapper |
className | string | — | Additional CSS classes |