KPI Sparkline Cards

Metric cards with a value that rolls in, an inline sparkline, and a rise/fall badge.

The KPI metric cards you see all over dashboards: when the card enters the window the big number rolls up from 0, an SVG sparkline draws the trend curve with a stroke animation and fades in the gradient below it, a percentage badge pops out in the top-right corner (green for up, red for down), and the cards reveal one after another with a stagger.

Loading preview…

npx shadcn@latest add https://webberui.com/r/kpi-sparkline-cards.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Count-up duration (s)countDuration

1.4

Line draw duration (s)drawDuration

1.1

Card stagger (s)stagger

0.12

<KpiSparklineCards />

Installation

npx shadcn@latest add https://webberui.com/r/kpi-sparkline-cards.json

Or, once registries are configured in components.json, install it as @webberui/kpi-sparkline-cards.

Usage

import { KpiSparklineCards } from "@/components/ui/kpi-sparkline-cards";

<KpiSparklineCards
  items={[
    {
      label: "Revenue this month",
      value: 1284500,
      delta: 12.4,
      prefix: "NT$",
      series: [42, 48, 45, 52, 58, 63, 70, 76],
    },
    {
      label: "Conversion rate",
      value: 3.62,
      delta: -1.8,
      suffix: "%",
      decimals: 2,
      series: [52, 50, 47, 44, 41, 38],
    },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`KpiSparklineItem[]`	—	The data for the KPI metric cards
`countDuration`	`number`	`1.4`	Duration of the big number rolling up (seconds)
`drawDuration`	`number`	`1.1`	Duration of the sparkline stroke animation (seconds)
`stagger`	`number`	`0.12`	Interval between cards revealing in order (seconds)
`className`	`string`	—	Forwarded to the outer grid container

KpiSparklineItem fields:

Field	Type	Default	Description
`label`	`string`	—	Metric name, shown in the card's top-left corner
`value`	`number`	—	Metric value; on reveal it rolls up from 0 to this value
`delta`	`number`	—	Percentage change against the previous period: green when positive, red when negative, neutral grey at 0
`series`	`number[]`	—	The data series for the mini trend line (at least 6 points recommended)
`prefix`	`string`	—	Prefix before the value, for example `"NT$"`
`suffix`	`string`	—	Suffix after the value, for example `"%"`
`decimals`	`number`	`0`	Number of decimal places shown for the value

Accessibility

When the user has "reduce motion" enabled at the system level, the numbers show their final value directly and the line appears complete immediately, with no rolling or stroke animation
Each card provides a full sr-only summary (metric name, final value, and direction of change), while the animating numbers and the sparkline are hidden from assistive technology (aria-hidden), which avoids announcing the intermediate values mid-roll
Rise and fall are not conveyed by color alone: the badge also expresses the trend with a directional arrow icon and the percentage in text
The big numbers use tabular-nums, so the layout width stays stable and does not jitter while they roll up