---
title: "Modular Pricing Calc — Free Framer component · Best of Framer"
description: "Free Framer component · by Reem Magdi · Buttons. Interactive calculator. RTL ready. No co"
canonical: "https://framer.elliotli.dev/component/modular-pricing-calc"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Modular Pricing Calc

# Modular Pricing Calc

Interactive calculator. RTL ready. No co

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

![Modular Pricing Calc preview image 1](https://framer.elliotli.dev/og/component/modular-pricing-calc/fdbedc2aa6cf8ef8/1600x1200.jpg)

## Summary

Interactive calculator. RTL ready. No co

## Description

Build any pricing section in minutes. Modular Pricing Calculator is a fully interactive component that lets your site visitors configure their own plan — and watch the total update in real time.

### What it does

Add as many rows as you need. Each row can be a Toggle, Checkbox, or Stepper — and every interaction instantly recalculates the total price with a smooth animated number transition.

-   **Toggle** perfect for billing period switches (e.g. monthly → annual with a discount multiplier)
    
-   **Checkbox** add-on features with a fixed price or percentage discount
    
-   **Stepper** seat or quantity-based pricing with configurable Min and Max limits
    

### What makes it different

→ **Animated total** the price morphs smoothly on every interaction, not an instant swap→ **Savings badge** automatically shows monthly and yearly savings when a discount row is active→ **Price breakdown tooltip** hover the total to see a full itemized breakdown of every selection→ **RTL / Arabic ready** switch direction to RTL from the properties panel; all layouts, labels, and savings copy flip automatically. Supports Arabic, Farsi, and all right-to-left languages→ **6 currencies** USD, EUR, GBP, EGP, SAR, AED each formatted with the correct locale and symbol→ **CTA button built in** configure label, URL, color, and radius directly from the panel. Background auto-inherits the accent color

### Fully styled from the panel

Every visual detail is exposed as a property — card background, border, radius, shadows, fonts, label sizes, accent color, stepper button style, badge colors, tooltip style, and CTA — no code required to match your brand.

### Properties

-   Base Price, Currency (6 options), Direction (LTR / RTL), Billing Label
    
-   Rows (Array) — unlimited Toggle / Checkbox / Stepper rows, draggable to reorder
    
-   Card Style — background, border, radius, padding, shadow, divider
    
-   Typography — body font, label size, label color, muted color, price font, price size
    
-   Colors — accent (applies to toggles, checkboxes, steppers, and CTA)
    
-   Controls Style — row background, checkbox box style, stepper button style
    
-   Badges & Tooltip — savings badge and breakdown tooltip colors and radius
    
-   CTA Button — label, URL, new tab, background, text color, radius, padding, font size
    
-   Breakdown toggle, Savings badge toggle
    

### Use it forSaaS pricing pages, subscription configurators, service quote builders, agency project estimators, and any page where price depends on user choices.

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

-   All · #6039

## Details

- **Author**: Reem Magdi
- **Published**: 2026-05-07
- **Updated**: 2026-05-15
- **Added**: 2026-04-20
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow