Data
Numbers, on air
The readout layer of the system: stats, metric tiles, KPI rows, progress bars, segmented meters, and dependency-free sparklines. Every figure is set in the condensed display face with tabular figures, so columns of numbers stay locked to the grid.
6-8 UI
Stat
A single readout: uppercase label, a display-face value with tabular figures, and an optional delta pill that reads green for a gain and red for a loss. Add an icon for a category cue.
6-8 UI
Metric Tile
A glass panel that frames a Stat, a full-width trend sparkline, and a short caption. It lifts and glows on hover; the accent hairline and chart tone follow the story.
Up over the last eight, led by a 31-point night in Denver.
Career-high pace, trending toward All-Star selection.
Cooling off after a hot start; shot selection under review.
6-8 UI
KPI Row
A responsive grid of metric tiles for the top of a coach or league dashboard. Feed it an array of tiles; it steps from four-up down to a single column on phones.
Second in the conference, four games back of the top seed.
Third-best mark in the league since the new year.
Offense humming behind a faster pace.
Defense tightening: fewer points allowed each week.
6-8 UI
Progress
A determinate bar on a Radix foundation. The teal gradient indicator glows and slides its width in with an ease-out transition. Switch to yellow for live or high-priority meters.
6-8 UI
Meter
A segmented pip gauge for ratings and readiness. Filled pips glow in the accent; empty pips sit dim, so the reading lands from across the room.
6-8 UI
Sparkline
A dependency-free inline SVG trend, drawn straight from a number array with a soft area wash and an end-point marker. Pick a tone to match the direction of the story.
Reference
Props
The core props for the data primitives. Every component also forwards native attributes and merges an incoming className.
Stat
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Uppercase caption above the value. |
| value | ReactNode | - | The headline figure, set in the display face. |
| unit | string | - | Small unit appended to the value, e.g. "%". |
| delta | number | - | Signed change; drives the arrow and pill color. |
| invertDelta | boolean | false | Treat a decrease as positive (green). |
| icon | LucideIcon | - | Leading icon shown in a teal chip. |
| size | "sm" | "md" | "lg" | "md" | Value and label scale. |
| align | "left" | "center" | "left" | Horizontal alignment. |
MetricTile
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value / delta / icon | StatProps | - | Forwarded to the inner Stat. |
| data | number[] | - | Series for the full-width trend sparkline. |
| caption | string | - | Short supporting line beneath the chart. |
| accent | "teal" | "yellow" | "teal" | Hairline and default chart tone. |
| sparklineTone | SparklineTone | - | Force the chart tone regardless of accent. |
Progress · Meter · Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
| Progress.value | number | - | Current value, measured against max (default 100). |
| Progress.tone | "teal" | "yellow" | "teal" | Indicator gradient. |
| Meter.value / max | number | - | Reading against full scale (max default 10). |
| Meter.segments | number | - | Pip count; defaults to max. |
| Sparkline.data | number[] | - | The series to plot. |
| Sparkline.stretch | boolean | false | Fill the container width edge-to-edge. |
| Sparkline.tone | SparklineTone | "teal" | teal · yellow · success · danger. |
import { KpiRow } from "@/components/ui/kpi-row";
import { Target, Trophy } from "lucide-react";
<KpiRow
cols={4}
items={[
{ label: "Record", value: "41-19", icon: Trophy },
{
label: "Points per game",
value: "118.6",
delta: 3.1,
icon: Target,
data: [110, 114, 112, 119, 116, 121, 118, 118],
caption: "Offense humming behind a faster pace.",
},
]}
/>