# Stat Card

KPI tile with a big figure, a trend delta and an optional sparkline. Changed digits roll into place, and beating a best or goal marks the moment with a “New best” label.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/stat-card
```

## Import

```tsx
import { StatCard } from "@/components/ui/stat-card/stat-card";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `icon?` | `IconName | null` | Icon in the tinted disc. `null` drops the disc. |
| `tone?` | `StatCardTone` | Tint of the icon disc. |
| `value` | `number` | KPI value — each changed digit rolls in its own column. |
| `format?` | `(n: number) => string` | Format the value (e.g. currency). Default: locale-formatted round. |
| `label` | `string` | Caption under the value. |
| `delta?` | `number` | Signed percent change — green arrow up, red arrow down, grey flat. |
| `deltaLabel?` | `string` | Small note after the label, e.g. "vs last week". |
| `precision?` | `number` | Decimal places the figure tracks (see AnimatedNumber). |
| `index?` | `number` | Position in a grid — tiles switch on 40ms apart in this order. Default 0. |
| `best?` | `number` | Record or goal. When `value` reaches it, light pools behind the figure,  one sheen crosses the tile and the label swaps to `bestLabel`. |
| `bestLabel?` | `string` | Label while `value` is at or past `best`. Default "New best". |
| `trend?` | `number[]` | Recent values, oldest first — drawn on as a sparkline under the figure. |
| `size?` | `"default" | "hero"` | "hero" sets a 48pt figure for the one tile that leads a dashboard. |
| `className?` | `string` | — |

## Icons rendered

- `zap` — /icons.html?i=zap

Source: https://lumioui.com/components/stat-card