React TCO Calculator
A higher sticker price is an engineering objection; total cost of ownership is a procurement one, and procurement signs the order. This plots cumulative cost against the incumbent and marks the year each option pays for itself — drag the horizon and watch the crossover move.
Total cost of ownership
Compared against Software crypto (incumbent) over 5 years.
| Option | Upfront | Per year | 5-yr total | vs Software crypto (incumbent) |
|---|---|---|---|---|
| Software crypto (incumbent) | $40,000 | $288,000 | $1,480,000 | — |
| KLV-7000 acceleratorRecommendedBreaks even in year 1 | $216,360 | $85,000 | $641,360 | −$838,640 |
| Rack HSM appliancesBreaks even in year 4 | $504,000 | $159,000 | $1,299,000 | −$181,000 |
Model assumes a flat 240-node fleet, no discount rate, and labour at $95/hr fully loaded. Server capacity is derived from measured TLS handshake throughput, not vendor claims.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| options | TcoOption[] | { id, name, badge?, lines, color? } |
| baselineId | string | The option everything is compared against |
| defaultYears | number | Initial horizon (default 5) |
| maxYears | number | Slider maximum (default 10) |
| currency | string | Currency symbol (default "$") |
| footnote | string | Where the assumptions go — use it |
Each option's lines are { label, upfront?, annual? }. Upfront costs land at year zero; annual costs accrue each year. Cumulative cost at year y is upfront + annual × y, which is what both the chart and the breakeven markers use.
Breakeven, honestly
The dot on each line is the first whole year that option's cumulative cost drops to or below the baseline's. If it never does within maxYears, no dot is drawn and the table says so rather than implying a payback that isn't there. An option that is cheaper from day one gets no marker either — there is nothing to break even on.
This is a persuasion tool, so the footnote is not optional. State the discount rate (this model uses none), the fleet size, and where the recurring numbers come from. A TCO chart with hidden assumptions is the thing a sharp procurement lead will use to discredit the rest of your pitch — and they will ask.
For a single-option savings model rather than a head-to-head, use the ROI Calculator.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.