Monthly / yearly pricing toggle
A stretchy pill, prices that roll like an odometer, a 2-months-free badge. Free.
Use it in Next.js
"use client";
import { PricingSwitch } from "@/components/pricing-switch/PricingSwitch";
export default function Pricing() {
return <PricingSwitch plans={plans} onSelect={(plan, yearly) => checkout(plan, yearly)} />;
}Install
- One command
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
Props
- plans
- your plans and prices
- onSelect
- plan + billing period
- defaultYearly
- start on yearly
- yearlyBadge
- badge text
Questions
Does the pricing switch work in Next.js?
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Can I control the period from outside?
Yes. Pass yearly and onYearlyChange.
Is it really free?
Yes. MIT licence, no email needed for the registry install.
Can Cursor or v0 add it for me?
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.