Stats Band

Blocks & Slices

A horizontal strip of headline numbers that count up on scroll-in with mono captions, hairline dividers, and per-stat prefix/suffix/decimals.

Inspired by Cult Pro — stats strips (pattern) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/stats-band.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/stats-band.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full items-center justify-center rounded-2xl border border-white/10 bg-[#0f0f10] px-4 py-12">
    <StatsBand
      stats={[
        { value: 99.9, suffix: "%", decimals: 1, label: "Uptime" },
        { value: 4, prefix: "$", suffix: "M+", label: "Raised" },
        { value: 12, suffix: "k", label: "Developers" },
        { value: 180, suffix: "ms", label: "P95 Latency" },
      ]}
    />
  </div>

Props

StatsBandProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
stats*	Stat[]	—	The statistics to display, left to right. Typically 3–5 entries.