Pricing
Pricing - Animated toggle
Two-tier pricing with a layout-animated toggle pill and cross-fading card content.
- Layout animation
- AnimatePresence
- Spring
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A toggle pill switches between two billing tiers, and the active indicator slides between options using a layout animation so the pill physically travels rather than blinking. The card content cross-fades as presence transitions swap the old prices out and the new ones in, all eased with a spring so the change feels soft.
When to use it
- A pricing page that offers monthly and annual billing options
- A two-plan product where you want switching between tiers to feel smooth
- Any pricing section where an animated toggle adds polish over a plain switch
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 2 options
defaultModeDefault tier
Related components
Using this block
Buy it, then copy components/blocks/pricing-toggle/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.