ROI Savings Calculator CTA

A two-slider ROI calculator that turns a visitor’s own hours-and-cost numbers into an instant dollar figure, then hands them straight to a CTA with that figure attached — built for a pricing or landing page where the sell is personal savings, not a generic feature list.

Growth & Conversion · React · Subscription · commercial licence · v1.0.1 · updated 2026-10-15 · Live demo

Install

velocityx add roi-savings-calculator-cta

Subscription component. Run velocityx login with your key first — get one.

---
import RoiSavingsCalculatorCta from '../components/velocity/roi-savings-calculator-cta/RoiSavingsCalculatorCta.tsx';
---
<RoiSavingsCalculatorCta client:visible />

Props

Prop	Type	Default	Description
`eyebrow`	`string`	`'ROI calculator'`	—
`headline`	`string`	`'See what this is worth to your team'`	—
`subhead`	`string`	`'Drag the sliders to match your situation — the…`	—
`currency`	`string`	`'$'`	—
`hoursLabel`	`string`	`'Hours spent per'`	—
`rateLabel`	`string`	`'Cost per hour'`	—
`defaultHours`	`number`	`6`	—
`defaultRate`	`number`	`45`	—
`frequency`	`'week' \| 'month'`	`'week'`	—
`minHours`	`number`	`1`	—
`maxHours`	`number`	`40`	—
`minRate`	`number`	`15`	—
`maxRate`	`number`	`200`	—
`calculate`	`(hoursPerPeriod: number, hourlyRate: number) => number`	—	—
`resultLabel`	`string`	`"You'd save around"`	—
`resultCaption`	`string`	`'per year, based on the numbers above.'`	—
`ctaLabel`	`string`	`'Get my savings plan'`	—
`onCtaClick`	`(annualSavings: number) => void`	—	—
`className`	`string`	`''`	—

Files written

velocityx drops these into your project:

components/velocity/roi-savings-calculator-cta/RoiSavingsCalculatorCta.tsx

Peer dependencies

react — nothing else. Zero external dependencies is the point.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.