Stats Band

Installation

pnpm dlx shadcn@latest add @cleverui/stats-band

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { StatsBand } from '@/components/blocks/stats-band'

Exampletsx

import { StatsBand } from '@/components/blocks/stats-band'

export default function StatsBandDemo() {
  return (
    <div className="flex min-h-[360px] items-center py-10">
      <StatsBand
        stats={[
          { value: 214, label: 'Teams onboarded', suffix: '+' },
          { value: 38, label: 'Hours returned / eng', suffix: 'h' },
          { value: 99.98, label: 'Match accuracy', suffix: '%', decimals: 2 },
          { value: 4.2, label: 'Payback window', suffix: ' mo', decimals: 1 },
        ]}
        footnote="Audited Q2 2026 · Meridian Ops Platform"
      />
    </div>
  )
}

API reference

StatsBand accepts the following props.

Prop	Type	Default	Description
`stats`*	`StatsBandStat[]`	–	3–5 entries; value is the final number, prefix/suffix wrap it
`duration`	`number`	`1.2`	seconds for the count-up sweep
`footnote`	`string`	–	optional mono source line

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface StatsBandStat {
  value: number
  label: string
  prefix?: string
  suffix?: string
  decimals?: number
}

Related components

Stats Bar List

Ranked React stats ledger, each row pairs a mono index and preformatted value with a 2px Tailwind-token bar drawn to scale, the leading row carrying the accent.

Stats Compare

Before-and-after metrics in two hairline columns, each row pairs the old number with the new one and settles a delta chip that quantifies the improvement.

Live Board Stats

Instrument-panel grid of stat tiles, counting numerals over mono labels, with one tile carrying a tiny inline SVG sparkline drawn from deterministic prop data.

Stats Story

One hero stat set enormous with a sentence that gives it meaning, while secondary metrics wait quietly below a hairline, an editorial argument, not a dashboard.

Stats Activity Grid

Contribution-style React activity heatmap, a dependency-free Tailwind grid of cells stepped through primary opacities, with mono axis labels and an honest text summary.

Stats Composition Bar

Part-to-whole React stat band, one Tailwind-token stacked bar splits into hairline-seamed segments with a legend ledger of preformatted shares beneath it.

Frequently asked questions

How do I install the Stats Band component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/stats-band`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Stats Band require?

Stats Band uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Stats Band to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code