Block Stats — React Page Block
Stats band where every number counts up from zero on scroll-in, with a settled, screen-reader-friendly final value always present. Prefixes, suffixes and formatting are props.
Usage
import { BlockStats } from "@/components/BlockStats";
export function Numbers() {
return (
<BlockStats
title="The graph, measured."
stats={[
{ value: 128, suffix: "ms", label: "Median deploy window" },
{ value: 99.98, decimals: 2, suffix: "%", label: "Rollouts clean" },
]}
{...{
title: "The graph, measured.",
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: stats/metrics band with count-up. Copy it, ship it — every string, link and color arrives through props. Runtime: pure DOM + CSS. No WebGPU, canvas, animation library or external assets; SSR-safe on first render. Theming: root custom properties (--vb-bg, --vb-fg, --vb-accent, --vb-border, --vb-radius, --vb-container) or the accent/scheme/className/style props. scheme flips the dark default to light. Guardrails: responsive via container queries down to 320px; interactive behavior degrades on touch; prefers-reduced-motion drops entrance/scroll motion while content stays complete. Numbers render settled for SSR and no-JS; the count-up re-arms once in view. Reduced motion shows final figures immediately.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header; all three optional for a bare band |
stats | readonly StatItem[] | { value, decimals?, prefix?, suffix?, label, description?, format? } |
demoNote | ReactNode | null | Fictional-figures marker; pass null with real data |
scheme | "dark" | "light" | dark |
accent | string (hex) | Sets --vb-accent for the whole block |
className / style | string / CSSProperties | Applied to the section root |
children | ReactNode | Replaces the default content entirely |