v2.1Social Proof

Customer Count

Large number plus label conveying scale (70 million members, 10K+ customers). Optional subtitle and growth indicator. Auto-formats numeric input via Intl.NumberFormat.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Numeric count

70,000,000members worldwide

String count

10K+developers using our SDK

With growth indicator

1,500enterprise customersvs. last quarter+12%

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
count	string \| number	required	The displayed figure. Strings are used verbatim; numbers are auto-formatted with locale thousands separators
label	string	required	Short context label displayed below the count
subtitle	string	undefined	Optional supporting text displayed below the label
growth	{ value: string; direction: "up" \| "down" }	undefined	Optional growth indicator. Renders a small inline SVG triangle beside the value string
align	"left" \| "center"	"center"	Horizontal alignment of all content within the component
className	string	undefined	Extra class name appended to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/customer-count/styles.css">

<!-- Center-aligned with growth indicator -->
<div class="cc cc--center">
  <span class="cc__count" aria-label="70 million">70 million</span>
  <span class="cc__label">members worldwide</span>
  <span class="cc__growth cc__growth--up">
    <svg class="cc__growth-icon" viewBox="0 0 10 8" aria-hidden="true">
      <polygon points="5,0 10,8 0,8"/>
    </svg>
    +2M this month
  </span>
</div>

<!-- Center-aligned with subtitle -->
<div class="cc cc--center">
  <span class="cc__count">10,247</span>
  <span class="cc__label">teams using the platform</span>
  <span class="cc__subtitle">across 80+ countries</span>
</div>

<!-- Left-aligned -->
<div class="cc cc--left">
  <span class="cc__count">25,000+</span>
  <span class="cc__label">businesses served</span>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.cc {
  --cc-count-font-size: var(--brand-display, 4rem);
  --cc-count-font-weight: var(--brand-weight-bold, 700);
  --cc-count-color: var(--brand-ink, #0f172a);
  --cc-label-color: var(--brand-muted, #475569);
  --cc-label-font-size: var(--brand-text-sm, 1rem);
  --cc-subtitle-color: var(--brand-subtle, #94a3b8);
  --cc-growth-up-color: var(--brand-success, #16a34a);
  --cc-growth-down-color: var(--brand-danger, #dc2626);
  --cc-gap: 0.375rem;
}