# Stat card

Stat card is a neobrutalist React component from Cruise UI. A dashboard figure: label, a big value that shrinks to fit (never breaking mid-number), an optional up/down change badge with an arrow, a note and an icon.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-stat-card
```

Import: `import { CruiseStatCard } from "@/components/cruise/stat-card";`

## When to use

Headline numbers on dashboards: balance, sales, active users. Rows of 2–4 next to a sidebar.

## When not to

Long tables of figures (use a Table) or progress towards a goal (use Progress).

## Example (React)

```tsx
import { Users, Wallet } from "lucide-react";
import { CruiseStatCard } from "@/components/cruise/stat-card";
import { formatNaira } from "@/lib/cruise-naira";

export default function StatCardExample() {
  return (
    <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-4">
      <CruiseStatCard label="Balance" value={formatNaira(12482350)} icon={<Wallet />} note="Updated 5 minutes ago" />
      <CruiseStatCard label="Sales today" value={formatNaira(486500)} change={{ value: "12%", direction: "up", label: "vs yesterday" }} />
      <CruiseStatCard label="Refunds" value={formatNaira(32000)} change={{ value: "3%", direction: "down", label: "vs last week" }} />
      <CruiseStatCard label="Active customers" value="1,240" icon={<Users />} change={{ value: "0%", direction: "flat" }} />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="brutal stat-card">
  <div class="stat-head"><p class="stat-label">Balance</p></div>
  <p class="stat-value">₦1,250,000</p>
  <div class="stat-foot">
    <span class="stat-change" data-direction="up"><svg aria-hidden="true"><!-- arrow-up-right --></svg><span class="visually-hidden">Up </span>12% <span>vs last month</span></span>
  </div>
</div>
```

## Props: CruiseStatCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | — |
| `value` | `ReactNode` | — | The figure, formatted, e.g. formatNaira(1250000) or "1,240". |
| `change?` | `CruiseStatChange` | — | — |
| `note?` | `ReactNode` | — | A short line under the value, e.g. "Updated 5 minutes ago". |
| `icon?` | `ReactNode` | — | An outline icon in a small tile, top right. |
| `className?` | `string` | — | — |

## Accessibility

- The change badge says "Up 12%" or "Down 3%" in words; the arrow is decorative.
- The value uses tabular figures, so columns of cards line up.
- Badge text is ink on a light wash, readable in every city and in Dark mode.