Stats Section with Count Up

Component

About

Big mono numbers on a quiet night sky that count up from zero as the band comes into view, with a serif heading, units in the accent and a short line under each. From the Midnight template.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stats Section with Count Up to your project and fits it to your theme.

Code

How Stats Section with Count Up is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { CSSProperties } from "react"

import { MetricsBand } from "@/components/ui/metrics-band"

// Midnight by day: Fraunces heading, Geist text, Geist Mono figures, units and label in deep gold
const fonts =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap');"

const settings = {
  label: "This quarter",
  title: "The platform, in numbers.",
  countUp: true,
  stars: 0,
  paper: "#f7f5f0",
  band: "#ece8df",
  ink: "#141a2e",
  muted: "#4a5166",
  primary: "#a8803a",
}

function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.paper,
    foreground: s.ink,
    primary: s.primary,
    "muted-foreground": s.muted,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--font-display": "Fraunces, ui-serif, Georgia, serif",
    "--font-sans": "Geist, ui-sans-serif, system-ui, sans-serif",
    "--font-mono": "'Geist Mono', ui-monospace, Menlo, monospace",
  } as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="flex min-h-svh w-full flex-col justify-center" style={{ ...day(s), fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif", background: s.paper } as CSSProperties}>
      <style>{fonts}</style>
      <MetricsBand
        label={s.label}
        title={s.title}
        titleClassName="font-[350] [font-variation-settings:'SOFT'_50]"
        countUp={s.countUp}
        band={s.band}
        stars={s.stars}
        items={[
          { value: "2.4", unit: "B", label: "requests served without a hiccup" },
          { value: "99.98", unit: "%", label: "uptime across every region" },
          { value: "14", unit: "ms", label: "median response at the edge" },
          { value: "320", label: "teams shipping on it every week" },
        ]}
      />
    </div>
  )
}