# Stat Tile

> A KPI tile: a rolling value, a delta that re-tints and turns its arrow (falls are warning, never danger) and a sparkline that morphs with the range. Tiles rise 60ms apart once.

- Tier: Eased Pro
- Interaction: Select
- Page: https://eased.dev/components/stat-tile
- Installs: motion

## Install

Stat Tile ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/stat-tile
```

A KPI tile: label, rolling value, delta and sparkline.

```tsx
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} />
```

## 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.