Usage-based pricing driven by a keyboard-friendly range slider. The estimate, graduated tier breakdown and cost bar update live, with tier thresholds marked on the track.
Usage-based pricing
No seats, no tiers to outgrow. Move the slider to see exactly what a month of tracking costs.
Monthly events
250,000events / month
First 10k events included
$0.50 per 1k up to 100k
$0.30 per 1k up to 1M
$0.15 per 1k up to 10M
Estimated monthly cost
Averages $0.36 per 1k events
npx shadcn@latest add https://hyperblur.dev/r/pricing-slider.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-slider.tsx.
import { PricingSlider } from "@/components/hyperblur/pricing-slider"
<PricingSlider unit="requests" onChange={(units, price) => console.log(units, price)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Usage-based pricing" | Pill above the title. Empty hides it. |
| title | string | "Start free. Scale by the event." | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| unit | string | "events" | Name of the billed unit, used in labels. |
| steps | number[] | 10k to 10M | Unit amounts the slider snaps to, in ascending order. |
| included | number | 10000 | Free units included every month. |
| tiers | { name: string; upTo: number; rate: number }[] | Growth, Scale, Volume | Graduated tiers. rate is the price per 1,000 units up to upTo. Thresholds that match a step are marked on the track. |
| value | number | Controlled unit amount. Snaps to the nearest step. | |
| defaultValue | number | 250000 | Initial unit amount when uncontrolled. |
| onChange | (units: number, price: number) => void | Called with the new amount and its estimated monthly price. | |
| currency | string | "$" | Currency symbol. |
| cta | { label: string; href: string } | { label: "Start with 10k free events", href: "#" } | Primary button under the estimate. |
| secondaryCta | { label: string; href: string } | { label: "Talk to sales", href: "#" } | Text link next to the button. |
| accent | string | "#10b981" | Track fill, tier highlight and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |