stats community open-source github discord npm contributors social-proof stats community open-source github discord npm contributors downloads open source stats section github stars discord members section community metrics with platform links
Community Stats
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/community.json community.html
<section class="ws-stats bg-[var(--ws-stats-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-stats-accent)]">Open source</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">Built in the open, trusted at scale</h2>
<p class="mt-4 text-lg text-[var(--ws-stats-text-soft)]">Join thousands of developers and companies who build with us every day.</p>
</div>
<dl class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center text-center">
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)]">
<!-- GitHub icon -->
<svg class="h-6 w-6 text-[var(--ws-stats-text)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
</div>
<dd class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">14k+</dd>
<dt class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">GitHub Stars</dt>
<a href="#" class="mt-3 text-xs font-medium text-[var(--ws-stats-accent)] hover:underline">Star on GitHub →</a>
</div>
<div class="flex flex-col items-center text-center">
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)]">
<!-- Discord icon -->
<svg class="h-6 w-6 text-[var(--ws-stats-text)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
</div>
<dd class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">5k+</dd>
<dt class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Discord Members</dt>
<a href="#" class="mt-3 text-xs font-medium text-[var(--ws-stats-accent)] hover:underline">Join Discord →</a>
</div>
<div class="flex flex-col items-center text-center">
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)]">
<svg class="h-6 w-6 text-[var(--ws-stats-text)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<dd class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">800+</dd>
<dt class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Contributors</dt>
<a href="#" class="mt-3 text-xs font-medium text-[var(--ws-stats-accent)] hover:underline">Contribute →</a>
</div>
<div class="flex flex-col items-center text-center">
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)]">
<svg class="h-6 w-6 text-[var(--ws-stats-text)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
</div>
<dd class="text-4xl font-bold tracking-tight text-[var(--ws-stats-text)]">5M+</dd>
<dt class="mt-2 text-sm text-[var(--ws-stats-text-soft)]">Downloads</dt>
<a href="#" class="mt-3 text-xs font-medium text-[var(--ws-stats-accent)] hover:underline">View on npm →</a>
</div>
</dl>
<div class="mt-12 flex flex-wrap items-center justify-center gap-4">
<a href="#" class="inline-flex items-center gap-2 rounded-full border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-stats-text)] transition-colors hover:border-[var(--ws-stats-accent)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
Star on GitHub
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-full border border-[var(--ws-stats-border)] bg-[var(--ws-stats-card-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-stats-text)] transition-colors hover:border-[var(--ws-stats-accent)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
Join Discord
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statscommunityopen-sourcegithubdiscordnpmcontributorssocial-proof
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and eyebrow text. |
| stats | Yes | Metric items with icon, number, label, and link. |
| cta-buttons | No | Bottom row of pill-style community action buttons. |
Four community metrics (GitHub stars, Discord members, contributors, downloads) displayed with platform icons, large numbers, and direct links. A bottom row of pill-style CTA buttons reinforces the call to join. Common on open-source and developer-tool landing pages.