Stats & Counters

A grid of bold metrics that turns your traction into trust.

Why it matters

Visitors decide whether to trust you within seconds. A row of specific, credible numbers — active users, uptime, support response time, average rating — does more for conversion than a paragraph of copy ever will. StatsCounters gives you a dedicated section to surface those numbers without writing any custom layout.

The section is hidden automatically when showSection is false or the items array is empty, so you can disable it instantly without touching any component code.

Usage

import StatsCounters from "@/components/StatsCounters";

<StatsCounters />

Configuration

stats: {
  showSection: true,
  heading: "Numbers that speak for themselves.",
  subheading: "Real results from real customers. Add your own metrics here.",
  items: [
    { value: "10k+", label: "Active users" },
    { value: "99.9%", label: "Uptime" },
    { value: "4.9★", label: "Avg. rating" },
    { value: "< 2h", label: "Support response", note: "Mon – Fri" },
  ],
},

showSection — set to false to hide the entire section globally. Useful while you are pre-launch and don't have real numbers yet.
heading — the large title above the stat cards. Keep it punchy — one short sentence.
subheading — a supporting line below the heading. One sentence is enough.
items — an array of stat cards, each with a value, a label, and an optional note.

Item fields

value — the large number or metric displayed prominently. This is a plain string, so format it however you like: "10k+", "$2M+", "4.9★", "< 2h".
label — a short description of what the number measures. Keep it to two or three words: Active users, Avg. rating, Uptime.
note — optional. A small qualifying line shown below the label in a lighter color. Use it for context that makes the stat more credible: Mon – Fri, last 12 months, verified reviews.

TipSpecific numbers are more believable than round ones. "9,847 users" feels more real than "10k+ users" — but "10k+" is fine once you're past that milestone. The key is to never show a number you can't defend.

TipIf you are pre-launch, hide this section until you have at least one real metric. A section with placeholder stats erodes trust rather than building it. Use showSection: false in the meantime.

TipFour cards is the sweet spot — enough to feel substantial, not so many that visitors stop reading. If you have more stats than that, pick the four that are most surprising or most directly relevant to what a buyer cares about.