React Pricing Estimator
Usage pricing is almost impossible to reason about from a table. Let someone drag their real numbers and watch the bill move, and "what would this cost us?" stops being a sales call.
Estimate your monthly cost
Drag your expected usage. Pricing is graduated — each unit is billed at the rate of its own tier.
Estimate only. Excludes taxes, support tiers, and any committed-use discount. Annual figure is the monthly estimate × 12 with no commitment discount applied.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| meters | PricingMeter[] | { id, label, unit, min, max, step?, defaultValue, tiers, included? } |
| basePrice | number | Fixed monthly platform fee |
| currency | string | Currency symbol (default "$") |
| cta | { label, href } | Summary-panel button |
| footnote | string | Where the assumptions go — use it |
Graduated, not flat
The pricing maths is graduated: each unit is charged at the rate of the tier it falls into, so crossing a breakpoint never re-prices the units below it. Flat tiering — where hitting 5,001 units suddenly re-rates all 5,001 — produces cliffs that make a customer's bill jump, and if your billing system is graduated but your calculator is flat, the estimate is simply wrong.
included units are subtracted before any tier applies, which is how free allowances actually work.
Say what it excludes
The number this produces will be remembered and quoted back to you. The footnote is not decoration: name what is excluded — taxes, support tiers, committed-use discounts — and be explicit that the annual figure is the monthly estimate x 12 with no commitment discount applied, because a reader will otherwise assume the annual number already includes one.
For a head-to-head against an incumbent rather than a self-serve estimate, use the TCO Calculator.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.