React ROI / Savings Calculator
The highest-converting block on a B2B page: the buyer enters their own numbers and the component computes the business case — savings, payback, multi-year return. Inputs are declarative and compute returns the result rows, so the same shell models cost savings, throughput, or headcount.
The results panel sits on a deep surface, the one place the electric accent is legal, so the headline figure carries the weight.
How much does hardware PQC save you?
Estimate the infrastructure you stop paying for when post-quantum handshakes move off the CPU.
Peak load across your edge fleet.
Annual infrastructure saving
$128,000
16 servers avoided
- Servers — software only
- 16
- Servers — with accelerators
- 0
- Hardware investment
- $36,0008 × PQCAsic-Pro
- Payback period
- 3.4 mo
- 3-year net saving
- $348,000
Model assumes ~2,500 ML-KEM handshakes/sec/server in software and ~50,000/sec per accelerator. Replace with your own benchmarks.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Headline question |
| description | string | Sub-line explaining the model |
| inputs | RoiInput[] | { id, label, min, max, step?, defaultValue, unit?, help?, format? } |
| compute | (values: Record<string, number>) => RoiResult[] | Your model; return rows to display |
| cta | { label, href } | Button on the results panel |
| footnote | string | Assumptions disclosure under the calculator |
Each RoiResult is { label, value, sub?, primary? }. Mark exactly one result primary — it renders as the headline figure.
Be honest in the footnote. State the assumptions behind the model; a calculator that overstates savings loses the deal in technical due diligence.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.