Stat card

Free

A bordered figure with a label, description and change.

Installs components/ui/stat-card.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/stat-card.json

Monthly revenue: $48,200

Compared with last month

+8.2%

When to use #

Use it for

A small grid of key numbers.
Summaries on a billing or reports page.

Skip it when

The number needs a trend; use a metric.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/stat-card.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { StatCard } from "@/components/ui/stat-card"

export function RevenueStat() {
  return (
    <div className="w-full max-w-xs">
      <StatCard label="Monthly revenue" value="$48,200" description="Compared with last month" change="+8.2%" />
    </div>
  );
}

API reference #

StatCard

component

Also accepts the native props of its root element and a ref.

PropTypeDefault

label *string—

value *string | number—

descriptionstring—

changeReactNode—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.