# Stat Tile

> Data in Twentyfirst UI.

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

## Example

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

export default function Preview() {
  return (
    <Stagger
      className="tf-grid"
      style={
        {
          "--cols": "repeat(4, 1fr)",
          "--cols-sm": "repeat(2, minmax(0, 1fr))",
          "--cols-md": "repeat(2, minmax(0, 1fr))",
        } as React.CSSProperties
      }
    >
      <StatTile tint="sky" value="128" label="Active members" />
      <StatTile tint="mint" value="24" label="Live projects" delta="+3 this week" />
      <StatTile tint="placeholder" value="9" label="Needs review" />
      <StatTile tint="butter" value="€48,210" label="Revenue (MTD)" />
    </Stagger>
  );
}
```

## Props

### Stagger

| Prop | Type | Notes |
| --- | --- | --- |
| `as?` | `string` |  |
| `className?` | `string` |  |
| `style?` | `CSSProperties` |  |
| `delay?` | `number` | Extra delay before the first child, in ms. |
| `reveal?` | `boolean` | Below the fold, wait until the group scrolls into view (default true). |
| `children?` | `ReactNode` |  |

### StatTile

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `ReactNode` | Required |
| `label` | `string` | Required |
| `tint?` | `Tint \| "surface" \| "placeholder"` |  |
| `delta?` | `string` |  |
| `delay?` | `number` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |