Skip to main content
Clever Ops

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.

Preview & code

Loading Stats Story preview
Open in v0

Installation

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

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

Usage

tsx
import { StatsStory } from '@/components/blocks/stats-story'
Exampletsx
import { StatsStory } from '@/components/blocks/stats-story'

export default function StatsStoryDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <StatsStory
        eyebrow="By the numbers"
        hero={{ value: 38, suffix: 'hrs' }}
        context="saved per engineer, per month, across 214 audited teams"
        secondary={[
          { value: '4.2 mo', label: 'Median payback' },
          { value: '99.98%', label: 'Match accuracy' },
          { value: '1.4M', label: 'Runs automated' },
        ]}
        source="Source: 2026 platform telemetry · Meridian Ops"
      />
    </div>
  )
}

API reference

StatsStory accepts the following props.

PropTypeDefaultDescription
eyebrowstring'By the numbers'–
hero*StatsStoryHero–the single headline figure
context*string–sentence that contextualizes the hero stat
secondaryStatsStorySecondary[]–2–4 quiet supporting stats as preformatted strings
sourcestring–mono citation line

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

Referenced types

Typestsx
export interface StatsStoryHero {
  value: number
  prefix?: string
  suffix?: string
  decimals?: number
}

export interface StatsStorySecondary {
  value: string
  label: string
}

Frequently asked questions

How do I install the Stats Story 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-story`. 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 Story require?

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

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services