Catalogue
A pricing section with a Monthly / Yearly switch. The pill stretches as it slides, every digit of every price spins like an odometer before it lands, and a “2 months free” badge pops in. The featured plan floats above the others with a spinning gradient border, and the checkmarks draw themselves in. You pass your own plans and get the plan and billing period back when someone picks one.
- Stretchy monthly/yearly pill
- Odometer prices
- “2 months free” badge
- Featured plan with a gradient border
- Stack
- React + TypeScript, Tailwind CSS, Framer Motion
- Next.js
- App Router ready, "use client" included
- Also included
- A single HTML file version and PROMPT.md
- Licence
- MIT
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.