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 it with npx shadcn@latest add @cruiseui/cruise-stat-card.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-stat-cardFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Balance
₦12,482,350
Updated 5 minutes ago
Sales today
₦486,500
Refunds
₦32,000
Active customers
1,240
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>
);
}
<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>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
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).
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.