caliper uidocs
DemoSign inGet Pro

Metric

Free

A number with its context, change and a small trend line.

Installs components/ui/metric.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/metric.json

Active users

+12%

24,180

Last 30 days

When to use #

Use it for

  • Headline figures at the top of a dashboard.
  • A value that needs a short history beside it.

Skip it when

  • Detailed comparison; use a chart.
  • Only a label and a number; use a stat card.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/metric.json

Adds its 3 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 { Metric } from "@/components/ui/metric"

export function ActiveUsers() {
  return (
    <div className="w-full max-w-xs">
      <Metric label="Active users" value="24,180" context="Last 30 days" change="+12%" series={[12, 14, 13, 18, 17, 21, 24]} />
    </div>
  );
}

API reference #

Metric

component

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

PropTypeDefault
label *string—
value *ReactNode—
contextstring—
changestring—
seriesreadonly number[]—

Accessibility #

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

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.