Stats Strip

metrics x big-number

A heading + intro beside three oversized metrics, each on a hairline rule — proof at a glance.

statsmetricsproof

The numbers builders see after switching.

A copy-and-ship library that turns a blank canvas into a finished page in a single sitting.

30%

Faster launches

2×

More output

140+

Systems inside

Code

relume-stats.tsx

const stats = [
  { value: "30%", label: "Faster launches" },
  { value: "2×", label: "More output per builder" },
  { value: "140+", label: "Design systems inside" },
];

export function StatsStrip() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="mb-16 grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-16">
        <h2 className="text-3xl font-bold tracking-tight">The numbers builders see after switching.</h2>
        <p className="text-muted-foreground">
          A copy-and-ship library that turns a blank canvas into a finished page in a single sitting.
        </p>
      </div>
      <div className="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-12">
        {stats.map((s) => (
          <div key={s.label} className="border-l border-border pl-8">
            <p className="text-6xl font-bold tracking-tight md:text-7xl">{s.value}</p>
            <p className="mt-2 font-semibold text-muted-foreground">{s.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

Adapted from the Relume Library — swap the placeholder copy and it themes itself from your project tokens.

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Stats Strip section and fill it with my copy.”