@usevyre/react @usevyre/vue

Stat

A dashboard KPI: a label, a large value, and an optional delta. The arrow direction follows the sign of delta (it falls → arrow points down). The color is set separately by trend — so a “lower is better” metric (churn, bounce) shows a green down arrow. Wrap several in StatGroup for an evenly-split row.

Trend colors

trend sets the color: "up" is green, "down" is red, "neutral" is grey. Here each column shows one so the difference is visible side by side.

Revenue$48.2k+12%+ → up → green
Refunds312-18%− → down → red
Orders1,2040%0 → flat → grey
 
import { Stat, StatGroup, Card, CardBody } from "@usevyre/react";

<Card>
  <CardBody>
    <StatGroup>
      <Stat
        label="Revenue"
        value="$48.2k"
        delta="+12%"
        trend="up"
        deltaLabel="+ → up → green"
      />
      <Stat
        label="Refunds"
        value="312"
        delta="-18%"
        trend="down"
        deltaLabel="− → down → red"
      />
      <Stat
        label="Orders"
        value="1,204"
        delta="0%"
        trend="neutral"
        deltaLabel="0 → flat → grey"
      />
    </StatGroup>
  </CardBody>
</Card>

Direction vs. color (decoupled)

The arrow direction follows the sign of delta; the color follows trend — they are independent. Left: churn falls (-0.4%, down arrow) but that is good, so trend="up" colors it green. Right: error rate rises (+0.3%, up arrow) but that is bad, so trend="down" colors it red.

Churn2.1%-0.4%down arrow, green (good)
Error rate1.8%+0.3%up arrow, red (bad)
 
import { Stat, Card, CardBody, Stack } from "@usevyre/react";

<Stack direction="row" gap="md">
  {/* delta is negative → DOWN arrow; trend=up → GREEN (good) */}
  <Card style={{ flex: 1 }}>
    <CardBody>
      <Stat
        label="Churn"
        value="2.1%"
        delta="-0.4%"
        trend="up"
        deltaLabel="down arrow, green (good)"
      />
    </CardBody>
  </Card>
  {/* delta is positive → UP arrow; trend=down → RED (bad) */}
  <Card style={{ flex: 1 }}>
    <CardBody>
      <Stat
        label="Error rate"
        value="1.8%"
        delta="+0.3%"
        trend="down"
        deltaLabel="up arrow, red (bad)"
      />
    </CardBody>
  </Card>
</Stack>

Props

Props

Prop Type Default Description
label string — Metric name (required).
value string | number — The headline figure (required, rendered large).
delta string | number — The change amount, e.g. "+12%" or 24.
trend "up" | "down" | "neutral" "neutral" Sets the delta color explicitly — up=success, down=danger, neutral=muted. Not inferred from the sign.
deltaLabel string — Context for the delta, e.g. "vs last month".
icon ReactNode — Optional leading icon (Vue: #icon slot).
size "sm" | "md" | "lg" "md" Value size.
Direction vs. color. The arrow direction always reflects the real change (sign of delta); trend only sets the color. That keeps “lower is better” metrics honest — a true down arrow, colored green.
← Stack Stepper →