StatCard

StatCard

<StatCard label="Active users" value="12,438" delta="+8.2%" description="vs last week" />
<StatCard label="Error rate"   value="0.31%"  delta="+0.12%" invertedTrend description="vs last week" />
<StatCard label="Latency p95"  value="184ms"  delta="-12ms"  invertedTrend />

Install: @helixui/core

import { StatCard } from '@helixui/core'

status: stable · since: 0.2.0

Tags: kpi, metric, tile, dashboard

Anatomy

┌──────────────────────┐
│  Label               │
│  $12,840             │   ← big value
│  ▲ +12.4%            │   ← delta
│  vs last month       │   ← description
│  ▁▂▃▅▆▇█             │   ← optional Sparkline
└──────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills available width, ~120-160px tall
• stackable — true
• fullBleed — false

Visual

A Card-shaped KPI tile with a small label, a large numeric value (font.size.2xl+), a delta with directional arrow tinted by tone, and optional supporting description and Sparkline.

Props

Name	Type	Default	Description
label	ReactNode	—	Metric name.
value	ReactNode	—	Big number — typically a string. Tabular-numerals are applied.
description	ReactNode	—	Small caption below the value.
delta	string	—	Signed delta string e.g. +12.4% or -2. Sign is parsed for color.
trend	'up' | 'down' | 'flat'	—	Override inferred trend.
invertedTrend	boolean	false	Lower is better (e.g. error rate). Flips up→bad, down→good.

Tokens used

color.bg.surface.default, color.border.default, color.text.primary, color.text.secondary, color.text.muted, color.text.action.success, color.text.action.danger, radius.lg, space.1, space.2, space.4, space.5, font.family.sans, font.size.xs, font.size.sm, font.size.3xl, font.weight.medium, font.weight.semibold, font.weight.bold

Accessibility

Notes

• Label/value/description are plain text. Pair multiple StatCards in a Grid for a KPI row.
• When using as a link or button, wrap or render the appropriate role inside.

Composes with

Component	Relation	Note
Sparkline	child	Trend visualization at the bottom.
Card	alternative	StatCard is opinionated; Card is generic.
Grid	parent	Common in a dashboard Grid.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

dashboard KPI

“revenue KPI with +12.4% delta”

<StatCard
  label="Revenue"
  value="$12,840"
  delta={{ value: '+12.4%', tone: 'success' }}
  description="vs last month"
/>

Related

• Card