# Stat Tile

- Page: <https://kznlabs.github.io/labsUI/components/stat-tile>

## Stat Tile (`stat-tile`, block)

Admin dashboard metric: value, a delta Badge that is green when the change is good news (invert for errors and latency), and an area Chart of the trend. Server-safe.

- Install: `npx @kznlabs/labsui add stat-tile`
- Docs: <https://kznlabs.github.io/labsUI/components/stat-tile>
- Brings: badge, button, button-variants, card, chart, overflow-focus, table, use-dismiss, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<StatTile>`: Admin dashboard tile: metric, delta Badge (green when it is good news) and an area Chart of the trend.
  - `label: string`: Metric name, e.g. "Revenue".
  - `value: ReactNode`: Formatted headline, e.g. "$48,290".
  - `data?: Record<string, string | number>[]`: Trend rows for the chart below.
  - `dataKey?: string` = `"value"`: Key of the value in each row.
  - `delta?: number`: Change in %, e.g. 12.5 or -3. Positive is good unless `invert`.
  - `format?: NumberFormatOptions`: Intl number format for the chart axis and tooltip.
  - `index?: string` = `"x"`: Key of the x label in each row.
  - `invert?: boolean`: For metrics where down is good (errors, latency).
  - `period?: string`: "vs last month".

### Usage

```tsx
<StatTile label="Revenue" value="$48,290" delta={12.5} period="vs last month" data={rows} index="month" format={{ style: "currency", currency: "USD" }} />
```

### Example: revenue-tile.tsx

```tsx
import { StatTile } from "@/components/blocks/stat-tile";

export function RevenueTile({ months }: { months: { month: string; value: number }[] }) {
  return (
    <StatTile
      label="Revenue"
      value="$48,290"
      delta={12.5}
      period="vs last month"
      data={months}
      index="month"
      dataKey="value"
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
    />
  );
}
```

### Example: error-rate-tile.tsx

```tsx
import { StatTile } from "@/components/blocks/stat-tile";

// invert: going down is the good news here, so a negative delta is green.
export function ErrorRateTile({ weeks }: { weeks: { week: string; value: number }[] }) {
  return (
    <StatTile
      label="Error rate"
      value="0.42%"
      delta={-18}
      invert
      period="vs last week"
      data={weeks}
      index="week"
      format={{ style: "percent", maximumFractionDigits: 2 }}
    />
  );
}
```