About this block

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.

When to use

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

• Heroes promising the visibility these cards deliver

After

• Features with charts expanding one card into a full report
• CTAs for readers who want their own four cards

What you can display

One strong use is the quarterly KPI row. Other rows:

• Funnel cards. Visitors, signups, activation, retention with their eight week shapes.
• Ops cards. Latency, errors, uptime, and throughput for a platform page.
• Revenue cards. MRR, expansion, churn, and NRR for an open metrics page.

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.