build69
Sign inGet API key
build69  /  Components  /  Data Display  /  StatCard

StatCard

v1.0.6Updated 29 Jul 2026

KPI tile showing a single big number, delta vs prior period, and optional sparkline. Stack 3-6 in a row at the top of dashboards. Supports a colorful mode that hashes the title to a deterministic palette hue for "rainbow

View source← Back to catalog

Preview

Live · 26 stories
Outstanding DefaultOpen ↗
▸Why this is recommendedkpistatmetricdashboard+6

StatCard — outstanding default.

Recommended for+14
  • ✓Dashboard KPI rows
  • ✓Detail page summary tiles
  • ✓Reporting "at a glance" rows
  • ✓Colourful executive overviews
Tags+6
kpistatmetricdashboardcardsparklinecolorfulpaletteoutstandingdefault
Features+4
  • Big numeric value
  • Delta indicator (up/down + percent)
  • Optional sparkline
  • Optional icon
  • Trend tone (positive / negative / neutral)
  • Compact / normal size
  • Colorful mode (colorful) hashes title -> hue from STAT_CARD_PALETTE for stable per-tile colours
  • paletteOverride prop to pin a specific palette entry
  • Exports hashTitleToHue / paletteForTitle / STAT_CARD_PALETTE helpers
  • i18n: labels prop overrides the info-button and bar-sparkline aria-labels; counts format via LocaleProvider (DEFAULT_STAT_CARD_LABELS)
Not recommended for−2
  • ✕Long-form metrics (put in a table)
  • ✕Single tiny metric inline (use a Badge)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "StatCard" })

Usage

import { StatCard } from '@/components/data-display/stat-card';

<StatCard label="Revenue" value="฿128,440" delta={12.4} spark={[2, 4, 3, 6, 8, 7, 9]} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
label

Metric label

stringyes
value

Primary value

string | numberyes
delta

Percentage change (renders a trend glyph via deltaDirection)

number—
caption

Neutral secondary text under the value, with NO trend glyph — use instead of delta when a metric has no meaningful direction (a flat delta would falsely imply a trend). MCP feedback fb_707b287d.

ReactNode—
icon

Glyph shown with the label

ReactNode—
iconPosition

Where icon sits: 'inline' (default, before the label — byte-identical) or 'top-right' as a corner badge (the common KPI-tile layout). MCP feedback fb_ad6d583d.

'inline' | 'top-right'—
spark

Sparkline data points

number[]—
tone

Semantic card tone; aligns with the catalog-wide Tone vocabulary. 'default' is kept as a byte-identical alias of 'neutral'.

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
colorful

Hash title to a deterministic palette hue

boolean—
paletteOverride

Pin a specific palette entry instead of hashing

StatCardPalette—
labels

Override built-in UI strings (info-button aria, bar-sparkline aria template 'Bar trend over {count} points') for i18n; English defaults exported as DEFAULT_STAT_CARD_LABELS. Point counts format via LocaleProvider

Partial<StatCardLabels>—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files