Marketing block

Hairline Stats Band

A four-up metrics strip with 1px hairline dividers, built from a single gap-px grid so the rules stay crisp on any display.

51 linesNo dependenciesAdded 8 Aug 2026

stats
metrics
numbers
kpi
social proof

What's included

components/stats-band.tsx
No runtime dependencies

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add stats-band

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

12,000+

Developers

Shipping with it weekly

99.99%

Uptime

Trailing twelve months

<40ms

Median latency

Measured at the edge

24/7

Support

Real humans, every timezone

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/stats-band.tsx

/**
 * <StatsBand> — a four-up numeric strip for a landing page.
 *
 * Hairline-separated cells built from a single `gap-px` grid over a
 * background, so the dividers stay 1px on every display without a border
 * on each child fighting its neighbour.
 */

import * as React from 'react'

export interface Stat {
  value: string
  label: string
  caption?: string
}

export interface StatsBandProps {
  stats?: Stat[]
  className?: string
}

const DEFAULT_STATS: Stat[] = [
  { value: '12,000+', label: 'Developers', caption: 'Shipping with it weekly' },
  { value: '99.99%', label: 'Uptime', caption: 'Trailing twelve months' },
  { value: '<40ms', label: 'Median latency', caption: 'Measured at the edge' },
  { value: '24/7', label: 'Support', caption: 'Real humans, every timezone' },
]

export function StatsBand({ stats = DEFAULT_STATS, className = '' }: StatsBandProps) {
  return (
    <section className={`mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8 ${className}`}>
      <div className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border/60 bg-border/60 lg:grid-cols-4">
        {stats.map((s) => (
          <div
            key={s.label}
            className="min-w-0 bg-background/80 p-5 text-center backdrop-blur transition-colors hover:bg-background sm:p-6"
          >
            <div className="break-words text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
              {s.value}
            </div>
            <div className="mt-1 break-words text-sm font-semibold text-foreground/80">{s.label}</div>
            {s.caption ? (
              <div className="mt-0.5 break-words text-xs text-muted-foreground">{s.caption}</div>
            ) : null}
          </div>
        ))}
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Nothing to install. No component library, no icon package.
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/stats-band.tsx and import it where you need the section:

import { StatsBand } from '@/components/stats-band'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`stats`	`Stat[]`	`DEFAULT_STATS, className = ''`
`className`	`string`	—

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

stats-band.html

<!--
  Hairline Stats Band — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8 ">
  <div class="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border/60 bg-border/60 lg:grid-cols-4">
    <div class="min-w-0 bg-background/80 p-5 text-center backdrop-blur transition-colors hover:bg-background sm:p-6">
      <div class="break-words text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">12,000+</div>
      <div class="mt-1 break-words text-sm font-semibold text-foreground/80">Developers</div>
      <div class="mt-0.5 break-words text-xs text-muted-foreground">Shipping with it weekly</div>
    </div>
    <div class="min-w-0 bg-background/80 p-5 text-center backdrop-blur transition-colors hover:bg-background sm:p-6">
      <div class="break-words text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">99.99%</div>
      <div class="mt-1 break-words text-sm font-semibold text-foreground/80">Uptime</div>
      <div class="mt-0.5 break-words text-xs text-muted-foreground">Trailing twelve months</div>
    </div>
    <div class="min-w-0 bg-background/80 p-5 text-center backdrop-blur transition-colors hover:bg-background sm:p-6">
      <div class="break-words text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">&lt;40ms</div>
      <div class="mt-1 break-words text-sm font-semibold text-foreground/80">Median latency</div>
      <div class="mt-0.5 break-words text-xs text-muted-foreground">Measured at the edge</div>
    </div>
    <div class="min-w-0 bg-background/80 p-5 text-center backdrop-blur transition-colors hover:bg-background sm:p-6">
      <div class="break-words text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">24/7</div>
      <div class="mt-1 break-words text-sm font-semibold text-foreground/80">Support</div>
      <div class="mt-0.5 break-words text-xs text-muted-foreground">Real humans, every timezone</div>
    </div>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Stats

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Stats

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Stats blocks

View category

Stat Cards with Deltas

Metrics carrying the direction they moved, with the good direction declared per stat so a falling churn rate reads as a win — arrow and text, never colour alone.

Stats135 lines1 dep

Results

The case for switching, in four numbers we will show our working on

None of these are from a launch week. They are medians across every account that has been on the platform for a full year, including the ones that churned — which is why the figures are lower than the ones on our competitors’ pages and why we are willing to name the sample size.

31%: lower cost per resolved ticket; Median across 412 accounts, 12 months
11 min: median first response, from 3.2 hrs; Platform telemetry, Q2 2026
4 weeks: median pilot to full rollout; Onboarding records, 2025–26
94%: of accounts renew at twelve months; Billing, cohort of 2,180

Stats Beside the Argument

Four figures in a hairline card next to the paragraph making the claim, each carrying an optional source line — for numbers that mean nothing without knowing lower than what, over how long, across how many.

Stats151 lines1 dep13 Sept

Before and after

Measured against what you are doing now, not against last quarter

Support metrics Shared inbox and a rota compared with On the platform
Metric	Shared inbox and a rota	On the platform	Change
Median first response	3.2 hrs	11 min	Improved: 94% faster
Tickets escalated to engineering	1 in 6	1 in 12	Improved: 48% fewer
Resolved without a second reply	41%	73%	Improved: +32 pts
Cost per resolved ticket	$4.90	$3.38	Improved: 31% lower
Hours a week spent on triage	22	6	Improved: 16 hrs back

Medians across 412 accounts over twelve months. “Before” figures are the ones those teams reported at the start of their pilot.

Before-and-After Metric Table

The buyer’s current situation in one column and yours in the next, as a real table with scoped headers — the comparison they are actually making, which a delta against your own past cannot express.

Stats210 lines1 dep13 Sept

Six years

Growth is a line, not a number

2021
12customers
Two founders, one region, and a product that only did ticket routing.
2022
190customers
The API shipped. Half of that year’s signups came through it.
2023
1,100customers
First enterprise contract, and the audit tooling it forced us to build.
2024
2,400customers
Broke even in Q3 and have not raised since.
2025
3,300customers
Opened Frankfurt and Sydney. Data residency stopped being a blocker.
2026
4,180customers
94% of them renewed at twelve months.

Milestone Timeline

The same measurement taken year after year down a vertical rail, each with the event that explains it — the shape for trajectory, which no snapshot of four numbers can claim.

Stats157 linesNo deps13 Sept

Measured, not claimed

How fast it is, and how we know

Every number below names the conditions it was taken under. A benchmark without its method is a marketing figure wearing a lab coat.

Cold start: 112 ms
Query throughput: 24.6k/s
Index rebuild: 38 s
Memory ceiling: 512 MB

Benchmark Stat Band

Performance figures with the measurement method printed beside each one, so a sceptical reader can check rather than take them.

Stats121 linesNo deps13 Sept

Security

What a reviewer will ask, answered first

A wall of certification logos answers none of these. Each figure names its scope, because a control that covers one environment and not the other is the thing a reviewer is looking for.

Encryption at rest: AES-256
Median patch time: 31 h
Data regions: 4
Access reviews: Quarterly

Security Posture Band

The compliance and security facts a procurement reviewer asks for, stated as figures with their scope rather than as badges.

Stats116 linesNo deps