Stat Card

The KPI tile pattern — a boxed icon + label, a large bold number, a colored up/down trend line below. changePct drives the trend color/icon automatically: green+up for positive, red+down for negative.

import { StatCard } from "@pompeitech/vesuvius-ui";

Default

Total Revenue

$45,231.89

+12.4%vs last month

Avg. Order Value

$68.20

-1.8%vs last month

With a trend visual

trend accepts any ReactNode — typically a Sparkline — so StatCard doesn't have to depend on the charts module itself.

Average Sales

837

+1.3%vs last month

API

StatCard

Prop	Type	Default	Description
`label`	`string`
`value`	`ReactNode`		The headline figure.
`icon`	`LucideIcon`		Optional boxed icon next to the label.
`changePct`	`number`		e.g. `12.4` or `-3.2` — drives the trend badge's color and up/down arrow automatically.
`changeLabel`	`string`	`"vs last month"`	Text after the percentage.
`trend`	`ReactNode`		An inline visual, e.g. a `Sparkline`.

Plus every native <div> prop on the root.