chrome

<tc-stat>

KPI card — label, value, optional prefix/suffix, and a colored delta with trend arrow.

import "@ra9/tan-compose-kit/stat"

Props

Name	Type	Default	Description
`label`	`string`	`""`	Small uppercase label above the value.
`value`	`string \| number`	`""`	The main number. Rendered as-is, so format thousands separators yourself.
`delta`	`string \| number`	`""`	Secondary change indicator, e.g. "+12%". Hidden if empty.
`trend`	`"up" \| "down" \| "neutral"`	`"neutral"`	Colors the delta and picks the arrow glyph. `up` is green, `down` is red.
`prefix`	`string`	`""`	Rendered before the value, e.g. "$".
`suffix`	`string`	`""`	Rendered after the value, e.g. "%".

CSS variables

Variable	Default	Description
`--tc-stat-surface`	`var(--tc-color-surface, #ffffff)`	Card background.
`--tc-stat-rule`	`var(--tc-color-rule, #ece5d3)`	Card border.
`--tc-stat-label`	`var(--tc-color-ink-muted, #6b7280)`	Label + prefix/suffix color.
`--tc-stat-value`	`var(--tc-color-ink, #14171f)`	Main value color.
`--tc-stat-up`	`var(--tc-color-success, #207a5b)`	Color of an "up" trend delta.
`--tc-stat-down`	`var(--tc-color-danger, #b3261e)`	Color of a "down" trend delta.
`--tc-stat-neutral`	`var(--tc-color-ink-muted, #6b7280)`	Color of a "neutral" trend delta.
`--tc-stat-radius`	`var(--tc-radius-lg, 12px)`	Corner radius.
`--tc-stat-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Basic usage

<tc-stat label="Revenue" prefix="$" value="48,210" delta="+12% vs last month" trend="up" ></tc-stat>

Trends

<tc-stat label="Sign-ups" value="1,204" delta="+8.4%" trend="up"></tc-stat> <tc-stat label="Churn" value="2.1" suffix="%" delta="−0.3%" trend="down"></tc-stat> <tc-stat label="Active users" value="38,950" delta="No change" trend="neutral"></tc-stat>

Note: trend="down" on a churn metric is actually a good thing — the component just colors it red. Pick trend based on the visual you want, not the literal direction of change.

Without a delta

Drop the delta prop and the secondary row is hidden.

<tc-stat label="MRR" prefix="$" value="120,000"></tc-stat>

Grid of KPIs

Combine with tc-grid for a responsive KPI strip.

<tc-grid min="220px" gap="3"> <tc-stat label="Revenue" prefix="$" value="48,210" delta="+12%" trend="up"></tc-stat> <tc-stat label="New users" value="1,204" delta="+8.4%" trend="up"></tc-stat> <tc-stat label="Churn" value="2.1" suffix="%" delta="−0.3%" trend="down"></tc-stat> </tc-grid>

Theming

<tc-stat style="--tc-stat-up: #2b6cb0; --tc-stat-radius: 4px;" label="Custom blue trend" value="42" delta="+3" trend="up" ></tc-stat>

Accessibility

The arrow glyph is aria-hidden; the delta text carries the meaning.
Numbers use font-variant-numeric: tabular-nums so they align nicely in a row of stats.
No interactive controls — if you need a clickable stat, wrap the component in your own link/button.
Be mindful of contrast when overriding the trend colors; the defaults pass AA on the standard surface.

← All components