Stats band

Block

A row of big numbers with short labels.

Installs components/ui/stats-band.tsxDepends on none beyond ReactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/stats-band.json

By the numbers

214+
Components and blocks: 18.4K
Developers installed: 99.4%
Keyboard checks passed: 4.8 / 5
Average review score

When to use #

Use it for

Proof points on a landing page.

Skip it when

Numbers can't be backed up.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/stats-band.json

Adds its 4 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 { StatsBand } from "@/components/ui/stats-band"

export function StatsBandDemo() {
  return (
    <StatsBand
              title="By the numbers"
              stats={[
                { value: 214, label: "Components and blocks", suffix: "+" },
                { value: 18400, label: "Developers installed", format: { notation: "compact", maximumFractionDigits: 1 } },
                { value: 0.994, label: "Keyboard checks passed", format: { style: "percent", minimumFractionDigits: 1, maximumFractionDigits: 1 } },
                { value: 4.8, label: "Average review score", suffix: " / 5", format: { minimumFractionDigits: 1, maximumFractionDigits: 1 } },
              ]}
            />
  );
}

API reference #

StatsBand

component

PropTypeDefault

stats *readonly BandStat[]—

titlestring—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.