pricing toggle plans billing conversion pricing toggle monthly annual plans billing subscription pricing with billing toggle monthly annual pricing switch
Pricing Toggle
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/toggle.json toggle.html
<section class="ws-pricing bg-[var(--ws-pricing-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-pricing-highlight-bg)]">Pricing</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Plans for every stage</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Save 20% with annual billing.</p>
<!-- Toggle -->
<div class="mt-8 inline-flex items-center gap-3 rounded-full border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-1">
<button type="button" class="rounded-full bg-[var(--ws-pricing-bg)] px-4 py-2 text-sm font-semibold text-[var(--ws-pricing-text)] shadow-sm" aria-pressed="true">Monthly</button>
<button type="button" class="rounded-full px-4 py-2 text-sm font-medium text-[var(--ws-pricing-text-muted)] transition hover:text-[var(--ws-pricing-text)]" aria-pressed="false">Annual</button>
</div>
</div>
<div class="mt-12 grid gap-6 md:grid-cols-3">
<!-- Starter -->
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Starter</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For personal projects</p>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$0</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<a href="#" class="mt-6 block rounded-xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Get started free</a>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
5 projects
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Core patterns
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Community support
</li>
</ul>
</div>
<!-- Pro (highlighted) -->
<div class="relative rounded-2xl border-2 border-[var(--ws-pricing-highlight-bg)] bg-[var(--ws-pricing-card-bg)] p-8 shadow-lg">
<span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-[var(--ws-pricing-highlight-bg)] px-3 py-1 text-xs font-semibold text-[var(--ws-pricing-highlight-text)]">Most popular</span>
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For growing teams</p>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$29</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<a href="#" class="mt-6 block rounded-xl bg-[var(--ws-pricing-action-bg)] px-4 py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Start free trial</a>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
All pattern families
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Priority support
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Custom branding
</li>
</ul>
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For organizations</p>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$99</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<a href="#" class="mt-6 block rounded-xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] px-4 py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Contact sales</a>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Everything in Pro
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Private registry
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
SSO & SAML
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Dedicated onboarding
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingtoggleplansbillingconversion
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title with toggle. |
| toggle | Yes | Monthly/annual billing switch. |
| plans | Yes | Pricing cards with name, price, features, CTA. |
Three-tier pricing with a monthly/annual toggle pill. Middle plan highlighted with indigo border, shadow, and floating “Most popular” badge. Each card has name, description, large price, CTA button, and checkmark feature list. Toggle is static — add JS to swap prices.