Stats Band
The accent-yellow-on-navy metric treatment in three idioms: stat-cards (a grid of navy metric cards), proof (one large stat beside a quote), and on-image (glassy stat cards over a hero image). stats drives all three.
$
Registry itembunx shadcn@latest add @nx-ui/stats-bandStat cards
The default: a responsive grid of navy metric cards, each with its own grid backdrop and a big accent stat.
2.4M tMaterial tracked to date
99.98%Chain-of-custody completeness
14 daysMedian time to go live
Proof
variant=proof pairs the first stat with a quote on a single brand band — a compact, high-trust close.
40%Less time on compliance admin
“The reporting that used to eat a day a week now takes minutes. My team got their Fridays back.”
On image
variant=on-image anchors glassy stat cards over a hero image (pass the image node). A left-fade navy gradient keeps the values readable.
- 2.4M t
- Material tracked to date
- 99.98%
- Chain-of-custody completeness
- 14 days
- Median time to go live
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
stats* | Stat[] | — | — |
variant | "stat-cards" | "proof" | "on-image" | "stat-cards" | — |
quote | { text: string; attribution?: string } | — | The quote for the `proof` variant. |
image | React.ReactNode | — | The background image node for the `on-image` variant. |
className | string | — | — |