---
title: "Modern Pricing Cards — Free Framer component · Best of Framer"
description: "Free Framer component · by Muhammad Zubair · Cards. Animated price transition cards"
canonical: "https://framer.elliotli.dev/component/modern-pricing-cards"
---

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

# Modern Pricing Cards

Animated price transition cards

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

![Modern Pricing Cards preview image 1](https://framer.elliotli.dev/og/component/modern-pricing-cards/3efcdc27e00dc2ed/1600x1192.jpg)

## Summary

Animated price transition cards

## Description

Monthly/Yearly animated pricing table for SaaS landing pages.

→ Smooth toggle switch with gradient indicator

→ Animated price transition on billing change

→ Featured plan highlight with glow effect

→ Shine-sweep hover on CTA buttons

→ Dark & Light theme

→ Fully editable plans via property controls

→ Responsive — stacks on mobile automatically

→ Accessibility ready — native buttons, focus states

→ Zero dependencies — pure React

Drop it in. Customize in 60 seconds. Ship.

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

-   All · #5440

## Details

- **Author**: Muhammad Zubair
- **Published**: 2026-06-23
- **Updated**: 2026-07-03
- **Added**: 2026-06-23
- **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