---
title: "Pricing Card Tabs — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Cards. What is Pricing Card Tabs?"
canonical: "https://framer.elliotli.dev/component/pricing-card-tabs"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Pricing Card Tabs

# Pricing Card Tabs

Interactive pricing section with tabs.

[View on Framer](https://framer.com/marketplace/components/pricing-card-tabs/?via=elliot-li)

![Pricing Card Tabs preview image 1](https://framer.elliotli.dev/og/component/pricing-card-tabs/d7cc789513853d2d/1600x1200.jpg)

## Summary

What is Pricing Card Tabs?

## Description

## What is Pricing Card Tabs?

Pricing Card Tabs is an interactive pricing section that pairs selectable plan tabs with a rich detail card. Visitors click a plan on the left to reveal pricing, features, a CTA button, and an optional hero image on the right — all with smooth crossfade transitions. Ideal for SaaS pricing pages, product tier comparisons, membership plans, and service packages where visual clarity drives conversions.

[![](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

-   Tabbed plan selection with animated detail card — smooth crossfade, blur transitions, and staggered feature reveals when switching between plans
    
-   Per-plan hero images with gradient overlay — assign a unique image to each plan or use built-in defaults, with an elegant bottom-fade into the card surface
    
-   Animated price counter — prices roll up and down with cubic easing when switching plans, drawing attention to the value difference between tiers
    
-   Four premium theme presets (Ivory, Slate, Midnight, Ember) plus full Custom color mode with seven independent color tokens
    
-   Independent typography controls — set separate fonts for the heading, tab titles, price display, and body text to match any brand system
    
-   Desktop and mobile layout modes — side-by-side two-column layout or vertically stacked single-column for responsive breakpoints
    
-   Per-plan icons from six built-in options (Zap, Rocket, Building, Star, Shield, Diamond) to visually differentiate each tier
    
-   Plan badges, disclaimer notes, and customisable CTA buttons with hover scale and shadow bloom interactions
    

## Controls inside Framer

### Plans

-   Plan name, subtitle, price, period, badge, CTA label, CTA link
    
-   Description tagline and features label
    
-   Icon selector (Zap, Rocket, Building, Star, Shield, Diamond)
    
-   Features list (up to 10 string items per plan)
    
-   Optional disclaimer note
    

### Images

-   Plan Images array (one image per plan, falls back to defaults)
    

### Section Header

-   Badge text
    
-   Heading (supports bold markers with double asterisks)
    
-   Subtitle (multi-line textarea)
    
-   Currency symbol
    
-   Show/hide images toggle
    

### Layout and Theme

-   Layout mode (Desktop / Mobile)
    
-   Theme preset (Ivory, Slate, Midnight, Ember, Custom)
    
-   Custom Colors group — background, card background, text primary, text secondary, accent, tab hover, CTA text
    

### Card Style

-   Border radius, card padding, tab roundness
    
-   Shadow intensity
    
-   Show/hide card border
    

### Animation

-   Transition speed (Slow, Medium, Fast)
    
-   Price counter animation duration
    

### Typography

-   Heading Font
    
-   Tab Font
    
-   Price Font
    
-   Body Font
    

## Best use cases

-   SaaS and software pricing pages where plan comparison clarity drives sign-ups
    
-   Agency and freelancer service tiers with distinct deliverables per package
    
-   Membership and subscription platforms showcasing feature differences across plans
    
-   Product landing pages that need a visually rich, editorial pricing section that builds trust
    

Ship a pricing section that looks custom-built in a fraction of the time. Drag, configure your plans, and publish.

## 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 · #4260

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-05-08
- **Updated**: 2026-06-13
- **Added**: 2026-04-26
- **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