KQ-543 · DELTA/TILE

Delta Tile

A KPI tile that answers three questions in one movement: the value rolls its digits on glide, the delta arrow turns to meet it on snap while its colour tweens danger to success, and the twelve-point sparkline redraws itself with pathLength on glide whenever the series changes. The tile is a button — hover or focus reads the previous period, Enter or Space pins that reading — and its accessible name is the whole sentence.

KQ-543 · DELTA/TILE

April

April · Revenue -1.6% · Active users +8.7% · Churn +9.1%

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/delta-tile

Props

label: string; default —; Metric name.
value: number; default —; Current value; its digits roll to each new number.
previous: number; default —; Prior period value; the delta is derived from it.
series: number[]; default —; Sparkline points, oldest first; a new array redraws the path.
format: (value: number) => string; default —; Formats the value, the previous reading, and the range.
lowerIsBetter: boolean; default false; Set when a fall is the good outcome — churn, latency, cost.

Prop	Type	Default	Description
label	string	—	Metric name.
value	number	—	Current value; its digits roll to each new number.
previous	number	—	Prior period value; the delta is derived from it.
series	number[]	—	Sparkline points, oldest first; a new array redraws the path.
format	(value: number) => string	—	Formats the value, the previous reading, and the range.
lowerIsBetter	boolean	false	Set when a fall is the good outcome — churn, latency, cost.