About 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