KPI cards for shadcn/ui

shadcn/ui has Card and Badge but no KPI or stats card, so every dashboard builds its own. The free file below is a shadcn Card whose number eases to each new value, with a delta Badge that knows when down is good. It starts from the number the server rendered, so there's no flash from zero and no hydration mismatch, and its hook skips the animation for people who turn motion off. If you want the whole animated dashboard around those numbers, with a springing bar chart, a goal ring and a Week/Month switch, that's Analytics Dashboard V1.

One payment$9

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

shadcn KPI card: the free component

components/kpi-card.tsx

"use client";
import { Badge } from "@/components/ui/badge";
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { useCountUp } from "@/hooks/use-count-up";

type KpiCardProps = {
  label: string;
  value: number;
  format?: Intl.NumberFormatOptions;
  /** % change against the last period */
  delta?: number;
  /** for numbers where down is good, like churn or latency */
  lowerIsBetter?: boolean;
  hint?: string;
};

export function KpiCard({ label, value, format, delta, lowerIsBetter = false, hint }: KpiCardProps) {
  const shown = useCountUp(value);
  const nf = new Intl.NumberFormat("en-US", format);
  const good = delta === undefined ? true : lowerIsBetter ? delta <= 0 : delta >= 0;

  return (
    <Card className="@container/card">
      <CardHeader>
        <CardDescription>{label}</CardDescription>
        <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
          {/* screen readers get the final number, not every frame of the count */}
          <span aria-hidden="true">{nf.format(shown)}</span>
          <span className="sr-only">{nf.format(value)}</span>
        </CardTitle>
        {delta !== undefined && (
          <CardAction>
            <Badge variant="outline" className={good ? "text-emerald-600 dark:text-emerald-400" : "text-destructive"}>
              {delta > 0 ? "+" : ""}
              {delta.toFixed(1)}%
            </Badge>
          </CardAction>
        )}
      </CardHeader>
      {hint && <CardFooter className="text-sm text-muted-foreground">{hint}</CardFooter>}
    </Card>
  );
}

hooks/use-count-up.ts

"use client";

import { useEffect, useRef, useState } from "react";

// Starts at the value the server rendered, then eases to each new value.
export function useCountUp(target: number, durationMs = 800): number {
  const [value, setValue] = useState(target);
  const fromRef = useRef(target);

  useEffect(() => {
    const from = fromRef.current;
    if (from === target) return;

    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      fromRef.current = target;
      setValue(target);
      return;
    }

    let raf = 0;
    const start = performance.now();
    const tick = (now: number) => {
      const t = Math.min((now - start) / durationMs, 1);
      const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
      const next = from + (target - from) * eased;
      fromRef.current = next;
      setValue(next);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, durationMs]);

  return value;
}

Good to know

shadcn/ui has no KPI or stats component. Its dashboard example builds them from Card, CardAction and Badge, which is what this file does too, so the card takes your theme's colours, radius and dark mode.
useCountUp starts at the value it's given. The server renders the real number, the browser hydrates the same number, and the count only runs when the value changes later, for example when someone switches the range. That's why there's no flash from zero and no hydration mismatch.
With "reduce motion" turned on in the OS, the hook sets the new value straight away instead of counting.
Screen readers get the final number from a visually hidden span. The animating number is hidden from them, so they don't hear every frame.
format takes any Intl.NumberFormat options. For a percent, pass a fraction (0.0382 shows as 3.82%).
lowerIsBetter flips the colour of the delta for numbers like churn, refunds or latency, where a drop is good news.

A row of KPI cards with a Week/Month switch

kpi-row.tsx puts three cards in a responsive grid and switches between two ranges with shadcn Buttons. Switching changes the values, and each card eases from the old number to the new one.
The data comes in as a prop from a server component, so the first paint already has your numbers.

components/kpi-row.tsx

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { KpiCard } from "@/components/kpi-card";

type Range = "week" | "month";
export type KpiData = Record<Range, { revenue: number; orders: number; conversion: number; deltas: [number, number, number] }>;

// data comes from the server (a page or a server action), so the first paint already has the numbers
export function KpiRow({ data }: { data: KpiData }) {
  const [range, setRange] = useState<Range>("week");
  const d = data[range];

  return (
    <section className="grid gap-4">
      <div className="flex gap-2" role="group" aria-label="Range">
        {(["week", "month"] as const).map((r) => (
          <Button key={r} size="sm" variant={r === range ? "default" : "outline"} aria-pressed={r === range} onClick={() => setRange(r)}>
            {r === "week" ? "Week" : "Month"}
          </Button>
        ))}
      </div>
      <div className="grid gap-4 sm:grid-cols-3">
        <KpiCard label="Revenue" value={d.revenue} delta={d.deltas[0]} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />
        <KpiCard label="Orders" value={d.orders} delta={d.deltas[1]} format={{ maximumFractionDigits: 0 }} />
        <KpiCard label="Conversion" value={d.conversion} delta={d.deltas[2]} format={{ style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }} hint="Orders divided by visitors" />
      </div>
    </section>
  );
}

The whole animated dashboard: Analytics Dashboard V1

Analytics Dashboard V1 is a dark dashboard where the three KPI numbers count up with easing, the bar chart springs into place with a stagger and a tooltip on hover, a goal ring fills, and a Week/Month switch with a sliding pill animates everything to the new data. It's one file that needs only framer-motion, with no chart library.
Its KPI cards are part of that file. They aren't exported on their own, so use the whole dashboard, or the free card above when you only need the numbers.
It draws on a fixed 1000 x 660 stage and scales down as one piece to fit its container. On a phone that gets small, so for a phone-first screen the free cards are the better fit.
Its count-up starts from 0 and doesn't check reduced motion itself; PROMPT.md in the zip has a prompt for adding it. Revenue shows in dollars, and conv is a percent number (3.82 means 3.82%), unlike the free card's fraction.
Its README says it was checked in a clean Next.js 15 + React 19 + Tailwind v4 app with strict TypeScript, next build and no hydration warnings.

Analytics Dashboard V1 on its own page

app/dashboard/page.tsx

import AnalyticsDashboard, { type DashboardData } from "@/components/AnalyticsDashboard";
import { KpiRow, type KpiData } from "@/components/kpi-row";

export const revalidate = 300; // re-read the numbers at most every 5 minutes

// Replace with your own query. Both components take plain numbers.
async function getStats(): Promise<{ kpis: KpiData; dashboard: DashboardData }> {
  const res = await fetch(`${process.env.STATS_URL}/summary`);
  return res.json();
}

export default async function DashboardPage() {
  const { kpis, dashboard } = await getStats();
  return (
    <main className="mx-auto grid max-w-5xl gap-10 p-6">
      <KpiRow data={kpis} />
      <AnalyticsDashboard title="Sales" subtitle="Last 7 days and this month" data={dashboard} />
    </main>
  );
}

A free KPI row with sparklines: Orbit

Orbit is our free observability dashboard. Its KPI row counts up and draws a small sparkline under each number, for an ops or monitoring look.
It installs with one shadcn command and ships with sample data in data.ts that you swap for your metrics.
Orbit doesn't change your shadcn components. Installed from the shadcn registry, its animations are prefixed orbit-, so Tailwind's animate-ping is left alone. The npm package (qodesign-free 0.1.2) still ships a global ping animation that replaces Tailwind's animate-ping.

Orbit, the free observability dashboard

What these don't do

The free card has no sparkline or chart. Add a shadcn Chart in the CardFooter if you need one.
Nothing here fetches data. You pass numbers in; where they come from is your query.
Analytics Dashboard V1 is a fixed layout of three KPIs, one bar chart of seven bars and one goal ring. It isn't a grid you rearrange.
V1 shows revenue in dollars only, and its count-up doesn't check reduced motion on its own.
We rendered the free card on the server with React 19 to check that the first paint holds the real numbers. The count animation and the reduced-motion jump are read from the code, not run in a browser.

Install

Copy from the zipPut react/src/components into src/, then none for the free card (it uses shadcn's Card, Badge and Button: npx shadcn@latest add card badge button). Analytics Dashboard V1: npm i framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: (V1) week and month: revenue, orders, conv, deltas, goal, 7 bars and labels
title / subtitle: (V1) header text
startDelay: (V1) ms before the first count-up
value / format: (free card) the number and its Intl format
delta / lowerIsBetter: (free card) % change and which way is good

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Animated Number Counter in React Without a Library (Count-Up and Odometer Roll)

Questions

Does shadcn/ui have a KPI card or stats card?

No. You build it from Card, CardAction and Badge. The free kpi-card.tsx on this page is that build, with a number that counts to each new value.

How do I animate a number in a shadcn card without a hydration error?

Start the animation at the value the server rendered and only animate when it changes, as useCountUp does. Starting from 0 on the client makes the first paint differ from the server or flash.

Does the count-up respect reduced motion?

The free hook checks it: with reduced motion on, the number jumps to the new value. Analytics Dashboard V1 doesn't check it on its own.

Can I use just the KPI cards from Analytics Dashboard V1?

They're part of the dashboard file, not a separate export. Use the free card above for KPI cards on their own.

Do I need a chart library?

Not for the cards. Analytics Dashboard V1 draws its bars and goal ring with framer-motion only.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.