Impact Stat Band

Installation

pnpm dlx shadcn@latest add @cleverui/impact-stat-band

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

Usage

tsx

import { ImpactStatBand } from '@/components/blocks/impact-stat-band'

Exampletsx

'use client'

import { ImpactStatBand } from '@/components/blocks/impact-stat-band'

export default function ImpactStatBandDemo() {
  return (
    <div className="flex min-h-[420px] items-center">
      <ImpactStatBand
        heading="What your support did last year"
        intro="Real numbers from real programs, counted, audited and owned."
        stats={[
          {
            value: 1240,
            label: 'meals shared from our community kitchen',
          },
          {
            value: 87,
            label: 'families housed through winter',
          },
          {
            value: 312,
            label: 'school bags packed for term one',
          },
          {
            value: 48,
            suffix: '%',
            label: 'of guests who returned for a second year of support',
          },
        ]}
        duration={1.8}
        sourceLine="Figures from our 2025 annual report, independently audited. The full report is free on our website."
      />
    </div>
  )
}

API reference

ImpactStatBand accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'What your support did last year'`	warm humanist sans, mission-led, never 'Our metrics'
`intro`	`string`	–	one warm sentence
`stats`*	`ImpactStat[]`	–	3–5 figures
`duration`	`number`	`1.8`	seconds for the single gentle count-up
`sourceLine`	`string`	`'Figures from our 2025 annual report, independently audited. The full report is free on our website.'`	audited provenance as genuine copy

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

Referenced types

Typestsx

export interface ImpactStat {
  value: number
  prefix?: string
  suffix?: string
  decimals?: number
  /** concrete unit-led line, e.g. 'meals shared from our community kitchen' */
  label: string
}

Related components

Funds Allocation Band

Where your dollar goes, a nonprofit transparency bar in React with seam-cut segments, a plain-language Tailwind ledger legend and an audited-statements footnote.

Volunteer Roles Panel

A volunteer get-involved panel in React, real roles with honest time commitments, plain requirements, a training reassurance and one direct sign-up action. Warm Tailwind, no guilt.

Donation Tier Grid

Honest donation tiers in a seamed React grid, preformatted amounts bound to concrete outcomes, nothing preselected, no guilt copy, one quiet accent. Tailwind, dark-pattern-free.

Agent Profile Card

An agent card that sells with proof, portrait placeholder, sold count and median days-on-market ticking up in tabular figures, suburbs served as chips, and an appraisal CTA.

Auction Results Strip

Last weekend's auction results as a ruled band, a clearance rate counting up once, then sold and passed-in rows with addresses leading and prices set in tabular figures.

Case Results Band

An anonymized results strip, large tabular outcomes like $4.2M recovered counting up once with measured restraint between hairline seams, over a formal disclaimer line.

Frequently asked questions

How do I install the Impact Stat 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/impact-stat-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 Impact Stat Band require?

Impact Stat 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 Impact Stat 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