Metric card
Unified metric tile — renders a single KPI with optional delta, trend chart, and legend. Replaces the former Stat card and Analytics card.
Included in the single kansho full pack. Components are not offered as separate installs.
Compact stat row
Cloudflare-style dense KPI tilesDefault grid
Featured panel with legend
- p50
- 5.2s
- p95
- 12.1s
- errors
- 0.6%
Tone variants with trends
Flat / zero series
A flat series renders a visible baseline, not a blankNo trend
Plain stat tile — no series propCard variants
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Mini chart
components/surfaces/mini-chart.tsxSupporting sources
These installed helpers belong to components documented on this page. They do not increase the public component count.
components/surfaces/metric-card-tokens.tsShared style tokens used by MetricCard and StatusCard.
Component documentation
Metric Card
components/surfaces/metric-card.tsxPurpose
Summarizes a named metric with value, trend context, and optional visualization.
Appropriate use
Use for dashboard metrics that need a concise value hierarchy and an optional small trend series.
Example
components/surfaces/metric-card.tsx has a representative live example in the "Default grid" section on /components/metric-card.
States
Supports compact or default density, surface, muted, or outline variants, accent, success, warning, or danger chart tones, positive, negative, flat, or absent deltas, and line, area, or bar trends.
API and props
MetricCard accepts label, value, unit, delta, deltaLabel, invertDelta, hint, series, trendVariant, tone, legend, trailing, density, variant, and className.
Dependencies
React, Lucide icons, MiniChart, metric-card token helpers, and the Kansho cn utility.
Accessibility
Keeps the metric label, value, and delta as visible text and passes an accessible description to its chart.
Limitations
It formats display hierarchy rather than raw numbers; callers must supply localized values, delta meaning, and an appropriately sampled series.
Source
Source: components/surfaces/metric-card.tsx.
Full pack
components/surfaces/metric-card.tsx is documented at /components/metric-card and installs only through the single Kansho full pack; no individual component install is offered.
Mini chart
components/surfaces/mini-chart.tsxPurpose
Draws a compact line, area, or bar trend from a numeric series.
Appropriate use
Use as a supporting sparkline inside a labelled metric or status surface, not as a standalone analytical chart.
Example
components/surfaces/mini-chart.tsx has a representative live example in the "Tone variants with trends" section on /components/metric-card.
States
Supports line, area, and bar variants, accent, success, warning, or danger tones, custom dimensions, empty or flat series, and labelled or decorative rendering.
API and props
MiniChart accepts values, variant, tone, width, height, className, ariaLabel, and accessibleDescription.
Dependencies
React and the Kansho cn utility.
Accessibility
Uses role img with a label and optional description when ariaLabel is supplied, otherwise marks the SVG presentation-only.
Limitations
It has no axes, tooltip, interaction, or value labels; bar series above forty points fall back to a line for legibility.
Source
Source: components/surfaces/mini-chart.tsx.
Full pack
components/surfaces/mini-chart.tsx is documented at /components/metric-card and installs only through the single Kansho full pack; no individual component install is offered.