A light pricing calculator where sliders for seats and contacts and a monthly or yearly switch update a bar chart of your price against competitors, with the yearly savings counting to the new value.
Move the sliders to match your team. Competitor prices come from their public pricing pages in October 2026.
People who answer conversations
Customers who start a conversation
Compared with the cheapest alternative for the same seats and contacts. Taxes not included.
npx shadcn@latest add https://hyperblur.dev/r/comparison-calculator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-calculator.tsx.
import { ComparisonCalculator } from "@/components/hyperblur/comparison-calculator"
<ComparisonCalculator onChange={(v, savings) => console.log(v, savings)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing calculator" | Label above the title. |
| title | string | "See what your support stack really costs" | Section heading. |
| subtitle | string | Where competitor prices come from | Paragraph next to the heading. |
| product | ComparisonCalculatorPlan | { name: "Relay", base: 0, perSeat: 12, perThousand: 4, annualDiscount: 0.2 } | Your pricing: monthly base fee, price per seat, price per thousand contacts and yearly discount. |
| competitors | ComparisonCalculatorPlan[] | Beacon Desk, Parcel HQ, Switchyard | Competitor pricing in the same shape. |
| value | { seats: number; contacts: number; annual: boolean } | Controlled inputs. Pair with onChange. | |
| defaultValue | { seats: number; contacts: number; annual: boolean } | { seats: 24, contacts: 60, annual: true } | Starting inputs when uncontrolled. |
| onChange | (value: ComparisonCalculatorValue, yearlySavings: number) => void | Called on every slider or billing change with the new savings against the cheapest competitor. | |
| maxSeats | number | 200 | Upper bound of the seats slider. |
| maxContacts | number | 250 | Upper bound of the contacts slider, in thousands. |
| cta | { label: string; href: string } | null | { label: "Start a free trial", href: "#" } | Button next to the savings. Pass null to hide it. |
| accent | string | "#ff5a36" | Color of your bar, slider fills and highlights. |