Live Board Stats

Installation

pnpm dlx shadcn@latest add @cleverui/stats-live-board

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

Usage

tsx

import { StatsLiveBoard } from '@/components/blocks/stats-live-board'

Exampletsx

import { StatsLiveBoard } from '@/components/blocks/stats-live-board'

export default function StatsLiveBoardDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <StatsLiveBoard
        heading="Platform vitals"
        updatedLabel="Last 30 days"
        tiles={[
          {
            label: 'Invoices matched',
            value: 48219,
            delta: '+12.4% vs prior',
          },
          {
            label: 'Match accuracy',
            value: 99.98,
            suffix: '%',
            decimals: 2,
            delta: 'Within SLA',
          },
          {
            label: 'Automation runs',
            value: 1.42,
            suffix: 'M',
            decimals: 2,
            // 12-sample sparkline, deterministic prop data, no Date/random
            points: [42, 48, 45, 52, 58, 61, 55, 67, 72, 70, 78, 84],
            delta: '↑ Steady climb',
          },
          {
            label: 'Median cycle time',
            value: 2.1,
            suffix: 'd',
            decimals: 1,
            delta: '−1.8d vs prior',
          },
          {
            label: 'Exception queue',
            value: 37,
            delta: '12 under review',
          },
          {
            label: 'Active workspaces',
            value: 214,
            suffix: '',
            delta: '+18 this month',
          },
        ]}
      />
    </div>
  )
}

API reference

StatsLiveBoard accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Platform vitals'`	–
`updatedLabel`	`string`	`'Last 30 days'`	static mono caption, never derived from Date
`tiles`*	`StatsLiveBoardTile[]`	–	3–6 tiles; exactly one should include points for the sparkline
`duration`	`number`	`1.2`	seconds for each tile's count-up sweep

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

Referenced types

Typestsx

export interface StatsLiveBoardTile {
  label: string
  value: number
  prefix?: string
  suffix?: string
  decimals?: number
  /** 8–16 samples, any scale, normalized internally for the sparkline */
  points?: number[]
  /** small mono trend note */
  delta?: string
}

Related components

Stats Band

Full-width hairline band of three to five counting stats, tabular numerals tick up once on view over mono micro-labels, separated by vertical hairline seams.

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 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.

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 Live Board Stats 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-live-board`. 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 Live Board Stats require?

Live Board Stats 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 Live Board Stats 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