StatCard | Tuff Docs

Usage

A color class in iconClass sets the tone (primary by default; grey draws no aura); meta adds a line under the label.

Loading demo...

insight computes the change from from and to and renders it as a tinted pill; insight.iconClass replaces the built-in arrow.

Loading demo...

progress switches to the progress layout; the ring follows the color in iconClass.

Loading demo...

Combines with TxStatusBadge and TxProgressBar into a dashboard status header.

Loading demo...

Pass count metrics as numbers so the default formatter adds separators; use the value slot for complex units or animated numbers.
Use insight.type="delta" for absolute changes and insight.type="percent" for relative ones.
Reserve variant="progress" for bounded values such as health, capacity, quota, or completion, never unbounded totals.
clickable changes only the look; let a surrounding button or link carry navigation and actions.
Let the parent set the width (a grid cell, a stretched flex item); a shrink-to-fit parent such as inline-block collapses the card.

Prop	Type	Default	Description
`value`	`number \| string`	-	Primary value; numbers get the default formatter's separators.
`label`	`string`	-	Metric label; shown at the top in the insight and progress layouts.
`iconClass`	`string`	`''`	Decorative icon class, sized by the component; its color class tints the icon, aura, and ring.
`clickable`	`boolean`	`false`	Adds only the pointer cursor; no click behavior is attached.
`insight`	`StatCardInsight`	-	Change indicator; moves the label to the top and renders the trend pill.
`variant`	`StatCardVariant`	`'default'`	Layout variant (`default` \| `progress`).
`progress`	`number`	-	Progress percent; passing it enables the progress layout, clamped to 0–100.
`meta`	`string`	-	Supporting line; the `meta` slot takes precedence.
`ariaLabel`	`string`	-	Accessible name of the `role="group"`; defaults to the visible label.

Slot	Description
`value`	Custom value area.
`label`	Custom label area.
`meta`	Supporting line; with both it and `meta` omitted, no line is reserved.

Field	Type	Default	Description
`from`	`number`	-	Baseline value.
`to`	`number`	-	Current value.
`type`	`'percent' \| 'delta'`	`'percent'`	Percent change or absolute delta.
`color`	`'success' \| 'danger' \| 'warning' \| 'info' \| string`	-	Indicator color, which also tints the pill; defaults to success for ≥ 0 and danger below.
`iconClass`	`string`	-	Custom trend icon class; defaults to a built-in SVG arrow.
`suffix`	`string`	-	Suffix, `%` by default for percent; it sits flush, so include any space, as in `' pts'`.
`precision`	`number`	-	Decimal places; defaults to 0 for `delta` and 1 for `percent`.

Variable	Source	Description
`--tx-stat-card-slot`	Component default `72px`; override through the component's `style`	Side of the square right-hand slot that sizes the icon and ring; `36px` on a narrow card.
`--tx-stat-card-slot-inset`	Component default `18px`; override through the component's `style`	Distance from the slot to the card's right edge; unused in the narrow layout.
`--tx-stat-card-icon-color`	Written by the component (the icon's computed color)	Source color of the aura, glyph ink, and ring; component-owned, so never bind it via `:style`.

The root is a role="group" named by its visible label through aria-labelledby; give dashboards a nearby heading so numbers never stand bare.
On mount, on iconClass / variant changes, and after a theme switch, the card reads the icon's computed color. A hue adds tx-stat-card--tinted and the aura; a grey icon (including --tx-color-info) draws none.
When the card's content box is under 240px (a container query, not the viewport), the slot shrinks to 36px and moves to the top-right corner.
The insight pill renders sign, number, and unit as one figure (+16.7%); numbers use tabular figures and hold still while updating.
Hover only switches the border to --tx-border-color, with no motion.
Under reduced motion the blobs stop drifting, the aura appears at once, and the progress arc jumps to its value.

The aura is three blurred blobs that animate transform alone, so the compositor moves them without re-blurring each frame.
Source: packages/tuffex/packages/components/src/stat-card/.

packages/tuffex/packages/components/src/stat-card/index.ts