Pricing Cards Pro

Interactive pricing section

Live Preview Grab more componnets for free Pricing Cards gives you a flexible pricing section designed to make plan comparisons feel clear while adding just enough motion to keep the interaction engaging. Switch between monthly and yearly pricing with an animated toggle that smoothly transitions each price using a digit-roller effect. The toggle knob stretches and settles into place, while an optional savings chip appears alongside the yearly option. Features Monthly and yearly pricing switch Animated digit-by-digit price transitions Smooth GSAP-powered animations Stretching and smearing toggle interaction Optional yearly savings chip Up to 3 pricing plans Popular-plan badge and styling Custom feature lists for every plan Custom CTA labels and links Open links in the same or new tab Responsive card layout Custom typography and colors Static-render optimized for Framer Fully Customizable Everything can be adjusted directly from the Framer property panel, so you can adapt the component to match your website, product, SaaS, agency, or studio. Customize Plan names, prices, and features Monthly/yearly pricing Currency and savings label Popular-plan state and badge CTA text, links, and new-tab behavior Card spacing, padding, radius, and borders Heading and plan typography Feature and supporting text styles Card and border colors Toggle typography, spacing, knob, and borders CTA colors, hover states, and borders Animation duration and digit stagger How It Works Add your pricing plans and define their monthly and yearly prices. Visitors can switch between billing periods using the animated toggle. When the billing period changes, each price updates with a vertical digit-roller animation instead of simply replacing the number. The toggle knob stretches during the transition before settling into its new position, while the optional savings chip can appear for yearly billing.

Interactive pricing section