Stat
Statistic display card with label, value, and optional change indicator. Features the HUD corner styling for a tactical dashboard aesthetic.
Basic Usage
Preview
Active Agents
42
Change Indicators
Preview
Revenue
$12,450
+12.5%
Errors
7
-3 from yesterday
Latency
42ms
No change
With Icons
Preview
Uptime▲
99.9%
+0.1%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | - | Uppercase label displayed above the value. |
| value* | string | number | - | The main statistic value to display. |
| change | string | - | Change indicator text displayed below the value. |
| changeType | "positive" | "negative" | "neutral" | "neutral" | Color coding for the change indicator. |
| icon | ReactNode | - | Optional icon displayed in the top-right corner. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders a semantic
<div>element - Label text is rendered as a visible
<span>for screen readers - Change type is conveyed visually through color; consider adding
aria-labelfor screen reader context when using change indicators - Supports
refforwarding for DOM access