Three tiers in one joined panel with a sliding monthly and yearly switch. Prices roll like an odometer when the period changes and the featured tier glows with a rotating border.
Pricing
Every plan includes global edge hosting, automatic HTTPS and instant rollbacks. Switch or cancel any time.
For side projects and weekend experiments.
Free forever, no card needed
Start for freeFor freelancers and small teams shipping weekly.
Billed $276 once a year
Start 14-day trialFor companies that need control and guarantees.
Billed $948 once a year
Talk to salesPrices in USD, billed per workspace. Taxes calculated at checkout.
npx shadcn@latest add https://hyperblur.dev/r/pricing-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-switch.tsx.
import { PricingSwitch } from "@/components/hyperblur/pricing-switch"
<PricingSwitch defaultPeriod="monthly" onPeriodChange={(p) => console.log(p)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing" | Small label above the title. Empty hides it. |
| title | string | "Pay for what you ship, not for seats" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| tiers | { name: string; description: string; monthly: number; yearly: number; features: string[]; cta: { label: string; href: string }; featured?: boolean; badge?: string }[] | Hobby, Pro, Scale | Plans. Prices are whole numbers per month; yearly is the monthly price when billed yearly. One tier can be featured. |
| currency | string | "$" | Currency symbol shown before every price. |
| period | "monthly" | "yearly" | Controlled billing period. Pair with onPeriodChange. | |
| defaultPeriod | "monthly" | "yearly" | "yearly" | Initial period when uncontrolled. |
| onPeriodChange | (period: "monthly" | "yearly") => void | Called when the switch changes. | |
| saveLabel | string | "Save 20%" | Badge next to the switch that lights up on yearly. Empty hides it. |
| footnote | string | Small line under the panel. Empty hides it. | |
| accent | string | "#8b5cf6" | Glow, badge and check color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |