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 it with npx shadcn@latest add @cruiseui/stat-bar.
Install
Terminal
npx shadcn@latest add @cruiseui/stat-barFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Passengers14
Fuel72%
Wallet₦1,200
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" } },
]}
/>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
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).
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.