Three plans with a spring-loaded monthly and yearly switch. Going yearly fires a burst of shards from the discount badge, strikes through the old price and slides in the yearly saving on every card.
Pricing
Every plan includes unlimited collaborators and global edge hosting. Switch to yearly and keep two months on us.
For solo builders validating an idea.
For small teams shipping every week.
For products with real traffic and SLAs.
npx shadcn@latest add https://hyperblur.dev/r/pricing-toggle-burst.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-toggle-burst.tsx.
import { PricingToggleBurst } from "@/components/hyperblur/pricing-toggle-burst"
<PricingToggleBurst currency="EUR" locale="de-DE" onPeriodChange={(p) => console.log(p)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing" | Small label above the title. Empty hides it. |
| title | string | "Simple plans that pay for themselves" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| plans | { name: string; tagline: string; monthly: number; yearly: number; features: string[]; cta: { label: string; href: string }; featured?: boolean }[] | Starter, Studio, Scale | Plans. yearly is the monthly price when billed yearly; the saving is computed from the difference. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| period | "monthly" | "yearly" | Controlled billing period. Pair with onPeriodChange. | |
| defaultPeriod | "monthly" | "yearly" | "monthly" | Initial period when uncontrolled. |
| onPeriodChange | (period: "monthly" | "yearly") => void | Called when the switch is toggled. | |
| discountLabel | string | "2 months free" | Badge that bursts when yearly is chosen. Empty hides it and the burst. |
| accent | string | "#2f7bff" | Switch, burst, featured card and check color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |