# Stat bar

Stat bar is a neobrutalist React component from Cruise UI. A row of stat boxes for dashboards and game HUDs, with optional meters.

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

```bash
npx shadcn@latest add @cruiseui/stat-bar
```

Import: `import { CruiseStatBar } from "@/components/cruise/stat-bar";`

## When to use

A few key numbers at the top of a dashboard or game screen.

## When not to

Long lists of numbers (use a Table).

## Example (React)

```tsx
import { CruiseStatBar } from "@/components/cruise/stat-bar";

export default function StatBarExample() {
  return (
    <CruiseStatBar
      columns={3}
      stats={[
        { label: "Passengers", value: "14", meter: { value: 14, max: 18 } },
        { label: "Fuel", value: "72%", meter: { value: 72, kind: "health" } },
        { label: "Wallet", value: "₦1,200", meter: { value: 12, kind: "health" } },
      ]}
    />
  );
}
```

## HTML

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

```html
<div class="brutal brutal-static" style="padding: 12px 16px; display: grid; gap: 8px">
  <span class="field-label">Fuel</span>
  <strong style="font: 700 2rem/1 var(--font-display)">72%</strong>
  <div class="progress" role="progressbar" aria-label="Fuel" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" data-tone="success">
    <div class="progress-track"><div class="progress-fill" style="width: 72%"></div></div>
  </div>
</div>
```

## Props: CruiseStatBar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stats` | `CruiseStat[]` | — | — |
| `columns?` | `4 \| 3` | `4` | Boxes per row on desktop (1 on mobile, 2 on tablet). |
| `className?` | `string` | — | — |

## Accessibility

- Meters are progress bars with role="progressbar" and their values.
- Labels are text, not just icons.