About this block

Usage Cost Estimator lets the buyer build their own bill. Stepper rows for seats and projects sit beside two add on switches, and every change lands on a live receipt to the right, line by line, ending in the monthly total and a note on what paying yearly saves at that size. The lede promises the number before checkout, and the receipt keeps that promise.

A client component on the ui Button and Switch with plain useState, the constants at the top of the file are the whole price model, the base price, the included allowances, and the per seat and per pack rates. Set them to your own plan and the steppers, the switches, and the total all recompute together.

When to use

Reach for this block on a pricing page where the plan is usage based and the sticker number depends on the buyer. A table of tiers makes them do the arithmetic in their head, the estimator does it for them and shows the total the moment they stop dragging, which is exactly when intent peaks and the CTA is waiting.

A natural flow around it on a Marketing Pro page:

Before

• Feature sections listing what each seat and project actually unlocks

After

• CTAs for the visitor who just built their exact setup
• FAQs answering the billing questions a live receipt tends to raise

What you can display

One strong use is a per seat plan with project packs. Other billing shapes:

• Metered usage. Steppers for API calls or storage, priced in blocks once a free allowance runs out.
• Module pricing. Switches for optional modules that each add a flat monthly line to the receipt.
• Annual toggle. A switch that reprices the whole receipt at the discounted yearly rate in place.

Tip: keep every line on the receipt, a total with no breakdown reads as a number you made up on the spot.