A plan card with a monthly and yearly switch. A pill slides between the two, the price rolls to the new figure and a savings badge pops in.
Studio
Billed $144 once a year
npx shadcn@latest add https://hyperblur.dev/r/pay-subscription-toggle.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-subscription-toggle.tsx.
import { PaySubscriptionToggle } from "@/components/hyperblur/pay-subscription-toggle"
<PaySubscriptionToggle name="Studio" monthlyPrice={15} yearlyPrice={144} onSelect={(interval) => subscribe(interval)} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Studio" | Plan name. |
| monthlyPrice | number | 15 | Price per month when billed monthly, in whole currency units. |
| yearlyPrice | number | 144 | Price per year. The card shows it divided by twelve and computes the saving. |
| currency | string | "$" | Currency symbol put in front of prices. |
| features | string[] | four sample features | Feature list. Up to four are shown. |
| cta | string | "Start free trial" | Text of the call to action button. Hidden when empty. |
| interval | "monthly" | "yearly" | Controlled interval. Pair with onChange. | |
| defaultInterval | "monthly" | "yearly" | "yearly" | Initial interval when uncontrolled. |
| onChange | (interval: PayInterval) => void | Called when the switch changes. | |
| onSelect | (interval: PayInterval) => void | Called when the call to action is clicked. | |
| accent | string | "#2f7bff" | Glow, check and button color. |