Stats Prose Inline

Installation

pnpm dlx shadcn@latest add @cleverui/stats-prose-inline

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

Usage

tsx

import { StatsProseInline } from '@/components/blocks/stats-prose-inline'

Exampletsx

import { StatsProseInline } from '@/components/blocks/stats-prose-inline'

export default function StatsProseInlineDemo() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-4 sm:px-6">
      <StatsProseInline
        template="Last year we shipped {0} releases to {1} teams and cut median deploy time to {2}."
        figures={[
          {
            value: '214',
            source: 'Harbor release log, calendar year 2025',
          },
          {
            value: '1,840',
            source: 'Active workspaces with ≥1 production deploy',
          },
          {
            value: '38s',
            source: 'p50 pipeline wall time, main branch only',
          },
        ]}
        accentIndex={0}
        align="start"
        sourcesLabel="Sources"
      />
    </div>
  )
}

API reference

StatsProseInline accepts the following props.

Prop	Type	Default	Description
`template`*	`string`	–	sentence with numbered slots, e.g. '… {0} … {1} …'
`figures`*	`StatsProseInlineFigure[]`	–	preformatted figures filling the slots in order
`accentIndex`	`number`	`0`	which figure renders in text-primary; pass -1 for none
`align`	`'center' \| 'start'`	`'start'`	paragraph alignment within the max-w-3xl measure
`sourcesLabel`	`string`	`'Sources'`	mono micro-label opening the sources block

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

Referenced types

Typestsx

export interface StatsProseInlineFigure {
  value: string
  source?: string
}

Related components

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 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 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 Stats Prose Inline 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-prose-inline`. 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 Prose Inline require?

Stats Prose Inline 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 Prose Inline 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