A KPI tile: label, rolling value, delta and sparkline.
import { StatTile } from "@/components/eased/stat-tile/stat-tile";<StatTile label="Revenue" value={43180} format={{ style: "currency", currency: "USD", notation: "compact" }} delta={0.209} caption="vs. prior 30 days" values={daily} /><StatTile label="Refund rate" value={0.014} format={{ style: "percent" }} delta={-0.023} invert index={3} />Installation
npx shadcn add @eased-pro/stat-tileNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Props
| Prop | Type | Default | |
|---|---|---|---|
label | string | ||
value | number | Rolls when it changes. | |
format / locale | Intl.NumberFormatOptions / locale | ||
delta | number | Ratio: 0.124 is +12.4%. | |
invert | boolean | false | Lower is better: a fall reads as good. |
caption | string | The comparison; hidden in tiles under 9rem. | |
values | number[] | The sparkline. | |
color | string | var(--eased-chart-1) | Sparkline colour. |
index | number | 0 | Entrance order: 60ms per step. |
action | ReactNode | Replaces the delta in the header row. |
Wrap tiles in ChartRangeProvider (from _primitives/chart-core/range) so every tile and chart on the page morphs on the same beat.
Motion signature: tiles rise 60ms apart once; on a range change the value and delta roll, the delta's arrow turns and re-tints, and the sparkline morphs from its current shape. A fall is warning, never danger.