Most pricing tables are just static grids. PriceGrid is a code component that brings your pricing page to life with native interactions and logic.
It handles the math for you—automatically switching between Monthly and Annual prices with smooth, professional animations that increase perceived value and delight your visitors.
Key Features:
A built-in Monthly/Yearly switch updates prices instantly. No complex component variants or variables required.
Subscription and fixed price options. Price ranges.
Choose how prices transition: Count Up, Scale, Fade, or None. Powered by framer-motion for buttery smooth performance.
Automatically scales and highlights your preferred plan with a custom badge and border to drive focus to your main tier.
Match your brand instantly. Customize primary colors, backgrounds, fonts, and button styles directly from the property panel.
The grid automatically adapts from a clean multi-column layout on desktop to a stacked, touch-friendly layout on mobile.
Automatically detect your visitor's location and display prices in their local currency. Configure custom rates and symbols for different regions to maximize conversion globally.
Perfect for:
SaaS Landing Pages
Membership Sites
Online Courses
Agency Service Packages
How to use: Simply drag PriceGrid onto your canvas. Edit your plans, prices, and features in the sidebar list. The component handles all the responsiveness and interaction logic automatically. No coding required.
CodePerfect
