Four metered sliders with free allowances hatched on the track feed a live receipt with a stacked cost bar. It also points to the cheapest flat plan that covers the usage and shows the monthly saving.
$ Pricing calculator
Drag each meter to match your traffic. Every account gets the free allowance, and you only pay for what goes past it.
npx shadcn@latest add https://hyperblur.dev/r/pricing-usage-calculator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-usage-calculator.tsx.
import { PricingUsageCalculator } from "@/components/hyperblur/pricing-usage-calculator"
<PricingUsageCalculator baseFee={0} onChange={(values, total) => console.log(values, total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing calculator" | Mono label above the title. Empty hides it. |
| title | string | "Estimate your bill before you write a line" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| meters | { id: string; label: string; unit: string; min: number; max: number; step: number; included: number; rate: number; defaultValue: number; color: string }[] | Requests, storage, bandwidth, build minutes | Metered resources. rate is the price per unit above the included amount. |
| baseFee | number | 20 | Fixed monthly platform fee added to usage. |
| plans | { name: string; price: number; limits: Record<string, number> }[] | Hobby, Pro, Business | Flat plans keyed by meter id. The cheapest plan that covers every meter is recommended. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| defaultValues | Record<string, number> | Initial values by meter id. Falls back to each meter's defaultValue. | |
| onChange | (values: Record<string, number>, total: number) => void | Called with every meter value and the pay-as-you-go total. | |
| cta | { label: string; href: string } | { label: "Start with this setup", href: "#" } | Button at the bottom of the receipt. |
| accent | string | "#2f7bff" | Recommendation and plan highlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |