Manicat UI

Stats band

Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.

Preview
Stats band preview
Deploys in the last 12 months
2.3M
Across 12,400 teamsUp from 1.4M the year before
API uptime over 90 days
99.99%
Measured every 30 seconds12 minutes down, 11 of them on July 14
Median response time
38ms
At the edge, worldwidep95 is 96 ms, down from 141 ms
Edge regions on six continents
35
Most people are under 20 ms awayEight added this year, including Lagos

When to use

  • Marketing pages that back a claim with a few numbers.
  • About and investor pages with headline metrics.

When not to use

  • Live product metrics with trends. Use Metric card or Metrics dashboard.
  • More than four numbers. Split them or use a table.

shadcn CLI

Also installs (2)

  • manicat-foundation
  • segmented-control
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-band",
  "type": "registry:block",
  "title": "Stats band",
  "description": "Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/segmented-control.json"
  ],
  "files": [
    {
      "path": "registry/blocks/stats-band/stats-band.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/stats-band/stats-band.tsx"
    },
    {
      "path": "registry/blocks/stats-band/stats-band-data.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/stats-band/stats-band-data.ts"
    },
    {
      "path": "registry/blocks/stats-band/stats-band.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/stats-band/stats-band.module.css"
    },
    {
      "path": "registry/blocks/stats-band/stats-band-world.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/stats-band/stats-band-world.ts"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/stats-band",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/stats-band",
    "markdown": "https://uiarc.dev/components/blocks/stats-band/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { StatsBand } from "manicat/registry/blocks/stats-band/stats-band";

export function StatsBandExample() {
  // Size containers have no width of their own: give the demo the whole row.
  return <div className="w-full"><StatsBand /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Numbers that count up Four headline stats with detail lines, ruled with hairlines.

Numbers that count up Four headline stats with detail lines, ruled with hairlines. preview

Built for scale

Requests a day
12M
Across 35 regions
Uptime
99.99%
Last 90 days
Median latency
38 ms
At the edge
Teams
4,200
And growing

Accessibility

  • Stats are a description list: the label is the term, the number, detail, and context are its descriptions. Screen readers get both the detail and the context line.
  • Stats with a context line are focusable, so keyboard and touch users reveal it too. Visuals are decorative and aria-hidden; the copy carries the meaning.
  • Screen readers get the final formatted value once; the counting digits are aria-hidden.
  • The section is labelled by the title or, without one, by "Key numbers".

Motion

  • Each number counts from zero with a strong ease out over 1.6s, staggered 90ms per stat, the first time the band is half in view.
  • Digits are tabular and the final value reserves the width underneath, so nothing shifts while counting.
  • Stats rise 8px and fade in; in the divided layout the top and bottom rules draw across and the hairlines grow between stats.
  • Once a number has mostly landed, its visual draws in: the sparkline and map wipe in from the left, bars grow from the baseline in a short sweep, and the trend end dot settles last.
  • Hover or focus cross-fades the detail line to the context line and gives that stat's visual the accent; the others stay neutral.
  • Reduced motion shows final values, lines, and visuals at once.

Responsive behavior

  • One row of up to four stats, two columns below 760px container width, one column below 420px.
  • Dividers reflow with the grid: vertical between neighbours, horizontal between rows.
  • Number size scales with container width between 36px and 72px.

Performance

  • Counting writes text straight to the DOM from one Motion tween per stat; React does not rerender per frame.
  • One IntersectionObserver for the band, disconnected after the first view.

Notes for AI

  • Use three or four stats with specific, verifiable numbers. Round numbers read as made up.
  • Put units in suffix (%, ms, +, /5) so they render smaller and muted beside the number. Use notation: "compact" for large counts; it counts within its final unit.
  • Give each stat a visual that proves the number, and a context line that compares it (up from, down from, p95). Leave both out for a plain numbers band.
  • Place it under a hero or between a features section and testimonials.
  • Edit stats-band-data.ts to replace the sample numbers.