Price Compare Cards: Premium Interactions Component by Aidan Looker

Drop-in pricing section with billing toggle, per-card features, and a full comparison table. Five theme presets, glassmorphism effects, and deep color control let you match any brand in minutes. Desktop and mobile layouts included.

What is Price Compare Cards?

A production-ready pricing component that combines plan cards, a monthly/yearly billing toggle, and an expandable feature comparison table into one configurable block. Designed for SaaS landing pages, agency sites, and product launches where clear pricing drives conversions. Supports up to five plans with per-card features, tooltips, popular badges, and animated price transitions.

Core Features

Monthly/yearly billing toggle with animated price count-up and customisable save badge
Expandable comparison table with simple or grouped feature modes, check/cross/text values, and hover-highlighted rows
Five theme presets (Dark, Light, Midnight, Warm, Custom) with full six-colour override when using Custom
Glassmorphism backdrop blur, cursor-reactive glow, animated border glow, and hover lift effects
Desktop and Mobile card layout variants for responsive design
Per-plan popular badge with custom gradient and text colour
Solid and outline CTA styles with independent text and outline colour overrides

Controls inside Framer

Plans

Plan Name, Description, Monthly Price, Yearly Price
Currency symbol and period label
Card Features list with optional tooltips
Comparison Values per plan (check, cross, text, or dash)
CTA Label, CTA Link, Popular toggle, Badge Text

Essential Controls

Billing Toggle visibility
Theme preset selector
Font family
CTA Style (Solid / Outline)
Card Layout (Desktop / Mobile)

Custom Colors (visible when Theme is Custom)

Background, Card BG, Text Primary, Text Secondary, Accent, Border

Card Style

Corner Radius, Glassmorphism, Shadow intensity
Hover Lift, Cursor Glow, Border Glow
Toggle Active colour, Toggle Inactive colour, Toggle Knob colour
CTA Text colour, CTA Outline colour

Comparison

Show/Hide section toggle
Feature Mode (Simple / Grouped)
Feature list
Start Expanded option

Feature Groups (visible in Grouped mode)

Group Title
Features per group

Animation

Entrance animation toggle
Price Count Up toggle
Speed control

Badge Style

Gradient Start, Gradient End, Text Color

Best use cases

SaaS and subscription product pricing pages that need monthly/yearly toggling and feature breakdowns
Agency and studio websites comparing service tiers with a detailed comparison grid
Product launch pages where a polished, on-brand pricing section converts visitors into customers

Built to save hours of layout work while delivering a pricing section that looks and feels premium.