Stat
Stats summarize key product metrics with restrained hierarchy and optional trend context.
Overview and decision boundary
Use Stat to summarize a single metric with optional trend context.
Do not overload one Stat with multiple metrics.
Preview
import { Stat } from '@nerio-ui/ui';<Stat label="Active projects" value="12" trend="+3 this week" />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add statimport { Stat } from '@nerio-ui/ui';Usage
import { Stat } from '@nerio-ui/ui';<Stat label="Active projects" value="12" trend="+3 this week" />Variants
| Variant | Purpose |
|---|---|
Default | Neutral metric summary. |
Anatomy
| Slot | Purpose |
|---|---|
card | Card-composed metric root with the n-stat customization hook. |
label | Names the metric. |
value | Primary numeric or short text value. |
trend | Optional supporting comparison. |
States
| State | Purpose |
|---|---|
Static | Displays a point-in-time value. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Use clear labels so values remain understandable out of context.
- Keep trend text textual; do not encode direction by color alone.
- Use advanced KPI cards outside the core primitive layer.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | stat installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | card |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Stat to summarize a single metric with optional trend context.
Do / do not
Do
Use for one simple metric with a clear label.
Do not
Do not overload one Stat with multiple metrics.
Do not turn Stat into KPI Card; advanced dashboard cards belong to Pro.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-stat-gap | Public customization point for this component contract. |
--n-stat-value-size | Public customization point for this component contract. |
--n-stat-trend-color | Public customization point for this component contract. |