Stat

A KPI / metric display: a label, a value, a delta that exposes data-direction (increase / decrease / neutral), help text, and a built-in inline Sparkline — or bring your own chart.

Features

Composable label, value, delta, and help text parts.

Delta infers direction from its numeric value, or accepts an explicit direction.

Delta exposes data-direction for color-coded styling.

Built-in inline SVG Sparkline from a series of numbers.

Root renders role="group" for assistive tech.

Example

Performance

Last 30 days

Revenue▲ 12.5%

$48,250

New customers▲ 5.4%

312

Churn rate▼ 0.8%

2.1%

Anatomy


import { Stat } from '@wire-ui/react'
 
<Stat.Root>
<Stat.Label>Monthly revenue</Stat.Label>
<Stat.Value>$48,250</Stat.Value>
<Stat.Delta value={12.5}>▲ 12.5%</Stat.Delta>
<Stat.HelpText>vs. previous month</Stat.HelpText>
<Stat.Sparkline data={[12, 18, 15, 22, 19, 28, 24, 30]} />
</Stat.Root>

Styling

Stat.Delta sets data-direction so you can color increases, decreases, and neutral changes from a single class string.


<Stat.Delta value={12.5} className="
  data-[direction=increase]:text-green-700
  data-[direction=decrease]:text-red-700
  data-[direction=neutral]:text-gray-500
">
  ▲ 12.5%
</Stat.Delta>

Stat.Sparkline draws with stroke="currentColor", so its line color follows the text-* color of the SVG.

Using data attributes

Stat.Delta exposes data-direction, resolved from the direction prop, or inferred from the sign of value (positive → increase, negative → decrease, zero/undefined → neutral).


[data-direction="increase"] { color: #15803d; }
[data-direction="decrease"] { color: #b91c1c; }
[data-direction="neutral"]  { color: #6b7280; }

Root props

Stat.Root renders a <div role="group"> and accepts all standard div attributes.

Label / Value / HelpText props

Stat.Label, Stat.Value, and Stat.HelpText each render a <span> and accept all standard span attributes. They carry no extra props.

Delta props

Prop	Type	Default	Description
`value`	`number`	—	Numeric change. Its sign derives `direction` when `direction` is omitted, and renders as the content when there are no children
`direction`	`'increase' \| 'decrease' \| 'neutral'`	inferred from `value`	Force the direction

Renders a <span> and accepts all standard span attributes.

Sparkline props

Prop	Type	Default	Description
`data`	`number[]`	required	Series of values to plot. Renders nothing if fewer than 2 points
`width`	`number`	`100`	Viewport width in px
`height`	`number`	`24`	Viewport height in px
`strokeWidth`	`number`	`1.5`	Stroke width of the line

Renders an <svg aria-hidden="true"> and accepts all standard SVG attributes except children.

Data attributes

Attribute	Element	Values
`data-direction`	Delta	`"increase"` / `"decrease"` / `"neutral"`

Accessibility

Stat.Root renders role="group" so the label, value, and delta are announced together.
Stat.Sparkline is decorative and marked aria-hidden="true"; convey the trend in text where it matters.