---
title: "Modern Plan Cards — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Muhammad Hafiidh · Cards. Smooth Animation, Premium, Easy-to-Edit."
canonical: "https://framer.elliotli.dev/component/modern-plan-cards"
---

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

# Modern Plan Cards

Smooth Animation, Premium, Easy-to-Edit.

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

![Modern Plan Cards preview image 1](https://framer.elliotli.dev/og/component/modern-plan-cards/7632a30592e42389/1600x1200.jpg)

## Summary

Smooth Animation, Premium, Easy-to-Edit.

## Description

**Key Features:**

-   **Smooth Price Switching:** Professional, fluid animations when toggling between Monthly and Yearly billing, no jumping, just seamless transitions.
    
-   **Zero-CMS Setup:** No complex database needed. Edit all plans, prices, and features directly on the canvas in seconds.
    
-   **Desktop & Mobile Optimized:** Painstakingly designed for the two most critical breakpoints (1200px and 390px) to ensure a pixel-perfect experience.
    
-   **High-Conversion Layout:** A clean visual hierarchy designed to guide users straight to your most important plans.
    
-   **Total Style Control:** Easily adjust colors, typography, and borders via the Framer properties sidebar.
    

**Who is this for?**

-   **SaaS Startups:** Launch your MVP or landing page with a pro-grade pricing section in minutes.
    
-   **Freelance Designers:** Save hours of work by using this as a solid foundation for client projects.
    
-   **Marketing Agencies:** Quickly build and test pricing layouts without the CMS headache.
    
-   **No-Code Builders:** Get a premium look without touching a database or complex logic.
    

**What’s Included?**

-   **1x Interactive Pricing Component** (Cards + Toggle).
    
-   **Pre-configured Variants** (Monthly & Yearly).
    
-   **Optimized Breakpoints** for Desktop and Mobile.
    
-   **Instant Remix Access** (Copy, paste, and go).
    

_Note: Background section and header text in the preview are for demonstration only._

**How to Use:**

1.  Copy the component from the Remix link.
    
2.  Paste it into your Framer project.
    
3.  Edit text and prices directly on the canvas.
    
4.  Customize styles to match your brand.
    

**Preview:**

Pricing Plan Preview

**Support & Policy:**

**No Refund Policy:** Due to the digital nature of this product, all sales are final. Please check the live preview before purchasing.

**Need help?** Reach out at [**muhammadhafiidhbasri@gmail.com**](mailto:muhammadhafiidhbasri@gmail.com) for any technical questions!

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

-   All · #8745

## Details

- **Author**: Muhammad Hafiidh
- **Price**: $8.00
- **Published**: 2026-05-06
- **Updated**: 2026-05-18
- **Added**: 2026-04-09
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator