PParable
All components

Stat Card

Blocks & Slices

A dashboard KPI tile whose tabular-nums value counts up from zero when scrolled into view, with a signed delta chip and an optional inline sparkline.

Inspired by Watermelon UI — dashboard stat cards — independently built, not affiliated. Attribution policy

Monthly revenue
$0
+12.4%
Active users
0
−3.2%
Avg. session
0.0m
Conversion
0.0%
+0.0%

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/stat-card.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/stat-card.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="grid w-full max-w-md grid-cols-1 gap-4 sm:grid-cols-2">
    <StatCard
      label="Monthly revenue"
      value={124700}
      delta={12.4}
      prefix="$"
      icon={<DollarSign />}
      data={[42, 38, 51, 47, 63, 72, 68, 84, 79, 96, 108, 124]}
    />
    <StatCard
      label="Active users"
      value={8421}
      delta={-3.2}
      icon={<Users />}
      data={[92, 88, 90, 84, 80, 78, 74, 70, 66, 60, 55, 51]}
    />
    <StatCard
      label="Avg. session"
      value={4.7}
      suffix="m"
      icon={<Activity />}
      data={[3, 3.4, 3.2, 3.9, 4.1, 4.0, 4.4, 4.7]}
    />
    <StatCard label="Conversion" value={3.9} suffix="%" delta={0.0} />
  </div>

Props

StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "prefix">

PropTypeDefaultDescription
label*string—Small uppercase caption above the value (e.g. "Monthly revenue").
value*number—Target number. Counts up from 0 the first time the card scrolls into view.
deltanumber—Signed percentage change; renders a coloured chip with an up/down arrow.
datanumber[]—Optional micro-series drawn as a tiny inline sparkline.
prefixstring—Text placed immediately before the value (e.g. "$").
suffixstring—Text placed immediately after the value (e.g. "k", "%").
iconReact.ReactNode—Leading icon node, shown top-right. Decorative — hidden from a11y.
formatter(n: number) => string—Formats the (animating) number. Defaults to grouped, precision-matched digits.

npm dependencies

  • lucide-react