pricing toggle annual monthly discount billing plans pricing toggle annual monthly discount billing save switch pricing with annual discount toggle monthly yearly billing switch
Pricing Annual Toggle
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/annual-toggle.json annual-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">Choose the right plan for you</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Start building today. Upgrade anytime.</p>
<!-- Monthly/Annual toggle -->
<div class="mt-8 inline-flex items-center gap-3">
<span class="text-sm font-medium text-[var(--ws-pricing-text)]">Monthly</span>
<label class="relative inline-flex cursor-pointer">
<input type="checkbox" class="peer sr-only">
<div class="h-6 w-11 rounded-full bg-gray-300 after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:bg-[var(--ws-pricing-highlight-bg)] peer-checked:after:translate-x-5"></div>
</label>
<span class="text-sm font-medium text-[var(--ws-pricing-text)]">Annual</span>
<span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Save 20%</span>
</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 solo creators</p>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$9</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</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>
Basic analytics
</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>
Advanced analytics
</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)]">$79</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>
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>
<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>
99.9% SLA
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingtoggleannualmonthlydiscountbillingplans
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title with toggle and save badge. |
| toggle | Yes | Monthly/annual switch with checkbox toggle. |
| plans | Yes | Three pricing cards with features and CTAs. |
Three-tier pricing with a checkbox-based monthly/annual toggle and a green “Save 20%” badge. Starter at $9/mo, Pro at $29/mo (highlighted), and Enterprise at $79/mo. Each card has feature checklist and CTA. Add JS to swap prices on toggle.