Stat card

Pro

One metric: label, value, change against a named period, and a small trend. The delta's colour is direction × whether up is good, and it carries an arrow, so a drop in errors reads as good news. A value that couldn't be computed says "Not computed" and why — never a zero.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/stat-card

Brings in: data, locale, scale, sparkline, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { KpiRow } from "@/components/stat-card"
import type { Kpi } from "@/lib/data"

const kpis: Kpi[] = [
  { label: "Deploys to Production", value: 34, delta: { value: 6, vs: "last month", good: "up" }, trend: [21, 25, 28, 24, 30, 34] },
  { label: "Test coverage", value: 0.78, format: "percent", delta: { value: 0.06, vs: "4.1 release", good: "up" }, trend: [0.68, 0.7, 0.69, null, 0.72, 0.76, 0.78] },
  { label: "Failing tests", value: 6, delta: { value: -4, vs: "last week", good: "down" } },
  { label: "Users affected", value: null, missing: "Needs session analytics, which isn’t connected." },
]

export default function Example() {
  return <KpiRow kpis={kpis} />
}

<StatCard>

Prop	Type	Default	Description
kpirequired	`Kpi`	—	The metric: label, value (null when not computed, with why), format, delta against a named period, and trend.
className	`string \| undefined`	—	Extra classes for the outer element.

<KpiRow>

A row of stat cards with one rhythm.

Prop	Type	Default	Description
kpisrequired	`Kpi[]`	—	The metrics, one card each, keyed by label.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under statCard in <LocaleProvider strings={{ … }}>; the table is exported as statCardStrings.

Key	English
notComputed	Not computed
trend	{label} trend
vs	vs {period}