Number Milestone Row

Installation

pnpm dlx shadcn@latest add @cleverui/number-milestone-row

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

Usage

tsx

import { NumberMilestoneRow } from '@/components/blocks/number-milestone-row'

Exampletsx

import { NumberMilestoneRow } from '@/components/blocks/number-milestone-row'

export default function NumberMilestoneRowDemo() {
  return (
    <div className="flex min-h-[400px] items-center">
      <NumberMilestoneRow
        eyebrow="Series B · Meridian Ops"
        heading="What we shipped before the round closed"
        milestones={[
          { value: '$4.2M', label: 'ARR booked' },
          { value: '214', label: 'Paying teams' },
          { value: '38h', label: 'Saved / eng / mo' },
          { value: '99.98%', label: 'Match accuracy' },
        ]}
      />
    </div>
  )
}

API reference

NumberMilestoneRow accepts the following props.

Prop	Type	Default	Description
`milestones`*	`{ value: string; label: string }[]`	–	3–5 entries; value is preformatted (e.g. '$4.2M', '99.98%'), the last entry is the punchline
`eyebrow`	`string`	`'Milestones'`	mono micro-label opening the section
`heading`	`string`	–	optional display heading above the row
`headingLevel`	`number`	`2`	heading element level when heading is provided

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

Related components

Number Ticker

Counts to a value once in view with an expo-out feel, fast start, precise landing. Locale-aware formatting, prefix and suffix, tabular numerals against layout shift.

Number Odometer

Multi-digit odometer where every digit rolls inside its own masked column, settling right to left like a meter, with prefix, suffix, and decimal support.

Number Radial Gauge

Determinate SVG radial gauge, a hairline token track, one primary arc drawn via pathLength, a tabular counted value at center and a mono label beneath.

Number Segment Meter

Discrete React meter primitive, value-of-max rendered as Tailwind-token unit cells that fill in stepped sequence, with a mono fraction readout and threshold tick.

Stat Delta Chip

Compact metric chip pairing a counted-up value with a signed delta pill, direction glyph and token-honest color, primary for gains, destructive for losses.

Stats Prose Inline

Editorial React stats paragraph, preformatted figures set inline in one flowing Tailwind sentence, with superscript footnote markers tied to a mono sources ledger.

Frequently asked questions

How do I install the Number Milestone Row component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/number-milestone-row`. 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 Number Milestone Row require?

Number Milestone Row 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 Number Milestone Row 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