Data display
StatCard
Render a headline metric with optional trend. Because big numbers look cool.
Curated demo
Documented components
78
Reference
Render a headline metric with optional trend. Because big numbers look cool.
- Use StatCard when the primary value should dominate the presentation.
- Pass href when the metric should link to a deeper report or destination.
Props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Label for the stat. |
value * | string | number | — | Primary value to display. |
trend | 'up' | 'down' | 'neutral' | — | Trend direction. |
trendValue | string | — | Trend text label. |
icon | string | — | Optional icon HTML. |
href | string | — | Optional link URL. |
class | string | — | Additional CSS classes. |
Example snippet
<StatCard label="Builds passing" value="24" trend="up" trendValue="+3 this week" />