Kpi Cards With Charts
Four KPI cards with working shadcn sparklines beneath their numbers.
Four KPI cards with working shadcn sparklines beneath their numbers.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Kpi Cards With Charts is the dashboard row as a marketing section. Four cards each carry a label, delta chip, the value, and a real shadcn area sparkline underneath, axis free and tooltip free at this size, just the working shape of the trend. The lede makes the implicit pitch, the kind your dashboard should be made of.
Built on ui/chart with one shared config, each card maps its series array into the mini chart. It supersedes the drawn stats-with-sparklines when the numbers will be wired to real data, drawn for fiction, working for fact, per the collection chart rule.
Reach for this block on analytics product pages and open metrics pages where the cards can eventually carry live series. The restraint matters at this size, no axes, no tooltips, sparklines under stats are texture with truth, not full charts.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is the quarterly KPI row. Other rows:
Tip: keep the deltas signed and the falling cost negative, the minus sign on a good metric is what makes the row read as real.