Skip to content
LuoForge/Tungsten
Components/Stat·Experimental

Stat

since v12.3.0

Stat — KPI tile showing a label, primary metric value, optional delta with

directional arrow, and an optional sparkline slot. Trend (arrow direction)

and sentiment (color) are deliberately decoupled so a falling metric can be

styled as positive (e.g. churn rate dropping).

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Stat } from '@hey-mike/tungsten';
import { Stat } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/stat/page.tsx

import { Stat } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function StatSnapshot() {
  return (
    <VariantGrid
      title="Stat"
      hero={
        <div className="w-48">
          <Stat label="Revenue" value="$42,180" delta="+12%" trend="up" sentiment="positive" />
        </div>
      }
      variants={[
        {
          label: 'metric row',
          node: (
            <div className="grid w-full max-w-[640px] grid-cols-3 gap-3">
              <Stat label="Revenue" value="$42,180" delta="+12%" trend="up" sentiment="positive" />
              <Stat label="Churn" value="2.1%" delta="-0.4pt" trend="down" sentiment="positive" />
              <Stat label="Open tickets" value="37" delta="+5" trend="up" sentiment="negative" />
            </div>
          ),
        },
        {
          label: 'no-data / loading',
          node: (
            <div className="grid w-full max-w-[640px] grid-cols-3 gap-3">
              <Stat label="MRR" value={null} />
              <Stat label="Active users" value="—" />
              <Stat label="NPS" value="72" loading />
            </div>
          ),
        },
      ]}
    />
  );
}

import { Stat } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function StatSnapshot() {
  return (
    <VariantGrid
      title="Stat"
      hero={
        <div className="w-48">
          <Stat label="Revenue" value="$42,180" delta="+12%" trend="up" sentiment="positive" />
        </div>
      }
      variants={[
        {
          label: 'metric row',
          node: (
            <div className="grid w-full max-w-[640px] grid-cols-3 gap-3">
              <Stat label="Revenue" value="$42,180" delta="+12%" trend="up" sentiment="positive" />
              <Stat label="Churn" value="2.1%" delta="-0.4pt" trend="down" sentiment="positive" />
              <Stat label="Open tickets" value="37" delta="+5" trend="up" sentiment="negative" />
            </div>
          ),
        },
        {
          label: 'no-data / loading',
          node: (
            <div className="grid w-full max-w-[640px] grid-cols-3 gap-3">
              <Stat label="MRR" value={null} />
              <Stat label="Active users" value="—" />
              <Stat label="NPS" value="72" loading />
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Stat />.

PropTypeDefaultDescription
label*ReactNode——
value*ReactNode—Primary metric. null/undefined renders an em dash (no-data).
deltaReactNode—Delta text, e.g. "+12%".
trend"up" | "down"—Arrow direction — independent of color.
sentiment"positive" | "negative" | "neutral"neutralColor meaning — independent of arrow (churn-down is positive).
sparklineReactNode—Optional sparkline / mini-chart node rendered under the value.
loadingbooleanfalse—

Source