PriceGrid
A smart SaaS pricing table with auto-calculating monthly/yearly toggles, 4 premium animation styles, and "Most Popular" plan highlighting. Fully customizable & responsive.
Make it with Workshop
Build your own component with AI
Boost your SaaS conversions with PriceGrid
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.
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.
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.
