Stat Cards

KPI cards for dashboard headers, in two looks - the compact row the dashboard templates use, and a footer variant with a gradient icon tile, an optional info tooltip, a display-size value, and a footer band carrying the comparison caption and a delta pill.

Total revenue

$152,313.92

From last month

16%

Total orders

25,162

From last month

20%

New customers

3,847

From last month

8.1%

Refunds

$4,209.44

From last month

2.4%

Installation

You can add the stat cards using our CLI or manually. The CLI also pulls the chip and tooltip primitives they compose:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add stat-cards

Variants

Two looks via the variant prop. plain (the default) is the compact card from the dashboard templates - neutral icon tile, label, value, and a delta chip. footer leads with a tinted gradient icon tile beside the label, sets the value at display size, and moves the comparison into a footer band with a white delta pill whose glyph follows deltaColor.

Customers

14,592

+5.3%

Unit sold

385

-2.1%

<StatCards />                  {/* compact: icon, label, value, delta chip */}<StatCards variant="footer" /> {/* icon tile + label, display value, footer band */}

Bring your own data

Pass stats to replace the demo metrics. The footer variant reads three extra optional fields per stat: tone tints the icon tile (blue, orange, purple, pink, sky, or emerald), caption swaps the footer text, and hint adds an info glyph with a tooltip.

import { RiCoinsFill, RiShoppingBasket2Fill } from "@remixicon/react";import { StatCards, type Stat } from "@/components/application/dashboard/stat-cards";
const stats: Stat[] = [  {    icon: RiCoinsFill,    label: "Total revenue",    value: "$152,313.92",    delta: "16%",    deltaColor: "lime",              // lime | rose | neutral - picks the pill glyph too    tone: "blue",                    // icon tile tint (footer variant)    caption: "From last month",      // footer band caption (footer variant)    hint: "Gross revenue across all channels.",  // info tooltip (footer variant)  },  {    icon: RiShoppingBasket2Fill,    label: "Total orders",    value: "25,162",    delta: "20%",    deltaColor: "lime",    tone: "orange",  },];
<StatCards variant="footer" stats={stats} />