Components › Blocks
Stat cards
KPI cards: a grey shell, a lit icon tile, the number and a white footer with the change.
Installation
npx plankui@latest add stat-cardsUsage
import { StatCards } from "@/components/ui/stat-cards";
<StatCards>
<StatCard label="Total revenue" value="$152,313" delta={16} icon={<DollarSign />} />
</StatCards>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value | string / ReactNode | required | What it measures and the number. |
| delta | number | Percent change, shown in the footer. | |
| comparison | string | "From last month" | Footer text. |
| icon / color | ReactNode / string | accent | Icon tile and its colour. |
| info | string | Tooltip on the info button. | |
| invert | boolean | false | Set when a fall is good. |