---
title: "Price Compare Cards — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Cards. What is Price Compare Cards?"
canonical: "https://framer.elliotli.dev/component/price-compare-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Price Compare Cards

# Price Compare Cards

Pricing cards with comparison table.

[View on Framer](https://framer.com/marketplace/components/price-compare-cards/?via=elliot-li)

![Price Compare Cards preview image 1](https://framer.elliotli.dev/og/component/price-compare-cards/24be35e292052fa3/1600x1200.jpg)

## Summary

What is Price Compare Cards?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #7206

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-04-23
- **Updated**: 2026-06-13
- **Added**: 2026-04-12
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards