pricing subscription current-plan billing account upgrade usage dashboard subscription plan billing upgrade cancel usage account dashboard current-plan current subscription plan card billing status with upgrade CTA account plan overview with usage bar
Pricing Current Plan
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/current-plan.json current-plan.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-md">
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8 shadow-sm">
<!-- Current plan badge -->
<div class="flex items-center justify-between">
<span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
Current plan
</span>
<a href="#" class="text-xs font-medium text-[var(--ws-pricing-highlight-bg)] hover:underline">Manage billing</a>
</div>
<!-- Plan name & pricing -->
<div class="mt-6">
<h2 class="text-2xl font-bold text-[var(--ws-pricing-text)]">Pro Plan</h2>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-soft)]">Billed monthly · Next renewal Mar 27, 2027</p>
<div class="mt-4 flex items-baseline gap-2">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$29</span>
<span class="text-sm text-[var(--ws-pricing-text-soft)]">/ month</span>
<a href="#" class="ml-auto text-sm font-medium text-[var(--ws-pricing-highlight-bg)] hover:underline">Change</a>
</div>
</div>
<!-- Divider -->
<hr class="my-6 border-[var(--ws-pricing-card-border)]">
<!-- Feature checklist -->
<ul class="space-y-3" aria-label="Included features">
<li class="flex items-center gap-3 text-sm text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><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 text-sm text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Advanced analytics & reporting
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Priority email & chat support
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Custom branding & white-label
</li>
<li class="flex items-center gap-3 text-sm text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
API access & webhooks
</li>
</ul>
<!-- Divider -->
<hr class="my-6 border-[var(--ws-pricing-card-border)]">
<!-- Usage bar -->
<div>
<div class="flex items-center justify-between text-sm">
<span class="font-medium text-[var(--ws-pricing-text)]">Projects used</span>
<span class="text-[var(--ws-pricing-text-soft)]">3 of 10</span>
</div>
<div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-[var(--ws-color-surface-alt)]" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="3 of 10 projects used">
<div class="h-full w-[30%] rounded-full bg-[var(--ws-pricing-highlight-bg)] transition-all"></div>
</div>
<p class="mt-1.5 text-xs text-[var(--ws-pricing-text-soft)]">7 projects remaining on your plan</p>
</div>
<!-- CTAs -->
<div class="mt-8">
<a href="#" class="block w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-4 py-3 text-center text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">
Upgrade to Enterprise
</a>
<div class="mt-4 text-center">
<a href="#" class="text-xs font-medium text-red-500 hover:text-red-600 hover:underline">Cancel subscription</a>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingsubscriptioncurrent-planbillingaccountupgradeusagedashboard
Slots
| Name | Required | Description |
|---|---|---|
| badge | Yes | Current plan badge with status indicator. |
| plan-info | Yes | Plan name, billing period, renewal date, and price with change link. |
| features | Yes | Checklist of included features. |
| usage | Yes | Progress bar showing resource usage. |
| cta | Yes | Upgrade button and cancel subscription link. |
Single centered card for account/billing pages. Shows the active plan name, billing cadence, next renewal date, a 5-item feature checklist, a usage progress bar, an upgrade CTA, and a cancel link. All static — wire up the usage percentage and prices from your backend.