# Stat Cell

> A KPI with its comparison: label, value, ▲/▼ delta that names what it compares to, optional sparkline.

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/StatCell/)

A KPI with its comparison: label, value, ▲/▼ delta that names what it compares to, optional sparkline.

Props: `label`, `value`, `delta` (percent, signed), `deltaText` (override), `compare` ("vs last Friday"), `invert` (down is good: refunds, failures, cost), `spark` (numbers), `icon` + `iconTint`, `tint`.

- Use 3–5 in a row, only when those numbers are the point of the screen.
- Always say what the delta compares to; good is mint, bad is blush, decided by `invert`.

## Example

```tsx
import * as React from "react";
import { StatCell } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "repeat(4, minmax(0, 1fr))",
          "--cols-sm": "repeat(2, minmax(0, 1fr))",
          "--cols-md": "repeat(2, minmax(0, 1fr))",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <StatCell
        label="Revenue today"
        value="€4,812"
        delta={12.4}
        compare="vs last Friday"
        spark={[3, 4, 4, 6, 5, 7, 8]}
        icon="card"
        iconTint="butter"
      />
      <StatCell
        label="Orders"
        value="128"
        delta={4.1}
        compare="vs last Friday"
        spark={[5, 6, 5, 7, 6, 8, 8]}
      />
      <StatCell
        label="Refund rate"
        value="1.2%"
        delta={-0.4}
        compare="vs last week"
        invert
        spark={[4, 4, 3, 3, 2, 2, 2]}
      />
      <StatCell
        label="Failed orders"
        value="7"
        delta={40}
        compare="vs yesterday"
        invert
        spark={[1, 2, 1, 3, 2, 4, 5]}
        tint="blush"
      />
    </div>
  );
}
```

## Props

### StatCell

| Prop | Type | Notes |
| --- | --- | --- |
| `label` | `ReactNode` | Required |
| `value` | `ReactNode` | Required |
| `delta?` | `number` |  |
| `deltaText?` | `string` |  |
| `compare?` | `string` |  |
| `invert?` | `boolean` |  |
| `spark?` | `number[]` |  |
| `icon?` | `IconName` |  |
| `iconTint?` | `Tint` |  |
| `tint?` | `Tint` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |