Modular Pricing Calc

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.