Pricing Card Stacks: Premium Data Component by Aidan Looker

Turn your pricing page into an interactive deck. Pricing Card Stacks replaces static columns with a stacked card layout where plans expand, compress, and transition smoothly. Drop it in, customise everything, and publish a premium pricing section in minutes.

What is Pricing Card Stacks?

Pricing Card Stacks is an interactive pricing component that displays your plans as a layered vertical stack. One plan expands to show full details while the others compress into compact summary rows. Click any plan to shift focus, toggle between monthly and yearly billing with animated price transitions, and let your visitors compare options in a format that feels editorial and intentional. Ideal for SaaS landing pages, product sites, and membership platforms.

Core Features

Stacked deck layout where the active plan expands with a progressive feature reveal and inactive plans compress into clean summary rows
Animated monthly/yearly toggle with smooth price count-up and auto-calculated savings badges
Four built-in theme presets — Glass, Dark, Gradient, and Custom — with full colour override support
Fully responsive across desktop, tablet, and mobile with automatic layout adaptation
Per-plan icons with five built-in options or custom image upload, popular badge with shimmer animation, and configurable CTA buttons with link support

Controls inside Framer

Plans

Plan name, subtitle, and description
Monthly price and yearly total (auto-calculates monthly equivalent and savings percentage)
Built-in icon selector (Cube, Bolt, Shield, Crown, Star) or custom icon image
Popular badge toggle
CTA button text and link
Feature list with strikethrough support (prefix with ~)
Feature tooltips matched by index

Toggle

Show or hide the billing toggle
Custom labels for monthly and yearly
Savings badge visibility

Card Style

Corner radius
Glow intensity
Card gap spacing
Accent bar width

Typography

Independent font controls for heading, price, body, and button text

Custom Colours (visible when theme is set to Custom)

Accent, glow, glow alt, card background, primary text, secondary text, CTA background, CTA text, badge gradient start and end, toggle background, toggle thumb, border, and tooltip background

Best use cases

SaaS and subscription pricing pages that need to stand out from standard three-column layouts
Product and membership sites where progressive feature discovery improves conversion
Agency portfolios and freelancer sites showcasing tiered service packages
Landing pages where space is limited and a compact, interactive format outperforms wide grids