Stat Component
React stat component for dashboards: KPI value, label, icon, trend indicator with up/down arrows and helper text — built with Tailwind CSS.
Import
javascript
1import { Stat } from "@neuctra/ui";Basic Usage
Total Revenue
$45,231
+20.1%vs last month
Dashboard Grid
Stats compose naturally into a responsive grid.
Revenue
$45,231
+20.1%
Active Users
2,338
-4.3%
Uptime
99.98%
0.0%
Borderless
Downloads
18.2k
+8%
Props
All available props for the Stat component.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Metric name (required) |
| value | ReactNode | — | Metric value (required) |
| icon | ReactNode | — | Icon shown in a tinted square |
| trend | "up" | "down" | "neutral" | — | Direction of change; controls arrow and color |
| trendValue | ReactNode | — | Change amount, e.g. "+12.5%" |
| description | ReactNode | — | Muted helper text next to the trend |
| bordered | boolean | true | Wrap the stat in a card surface |
| headerClassName | string | — | Styles the header row wrapping the label and icon. |
| labelClassName | string | — | Styles the label text. |
| iconClassName | string | — | Styles the tinted icon wrapper. |
| valueClassName | string | — | Styles the metric value text. |
| footerClassName | string | — | Styles the footer row wrapping trend and description. |
| trendClassName | string | — | Styles the trend badge. |
| trendIconClassName | string | — | Styles the trend arrow icon. |
| descriptionClassName | string | — | Styles the description text. |
Accessibility
- Values use tabular numerals so columns of stats align.
- Trend colors pair with arrow icons, so meaning never relies on color alone.
Frequently Asked Questions
How do I install and import the Stat component?
Install the @neuctra/ui package, then import it with: import { Stat } from "@neuctra/ui";
Can I customize the Stat component's appearance?
Yes. Stat accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.
Is the Stat component accessible?
Stat is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.