The Geo Pricing Card is a smart pricing component designed to display region-based pricing dynamically. Instead of showing fixed values, the component detects a user’s location via IP and updates pricing accordingly to match predefined regional values.
Each pricing card can include plan details such as pricing tiers, billing options (monthly or annual), and structured benefits. The component supports flexible customization, allowing you to visually tailor the card using solid colors or gradients, reorder elements, and control layout presentation.
It also includes support for add-ons, enabling you to attach optional extras that can increase the total pricing dynamically. While add-ons are fully functional within their configured region, they may not apply when accessed outside the region they were created for.
Benefits can be enhanced visually using dynamic icons or standard icon sets, helping to improve readability and hierarchy within the pricing structure.
This component is ideal for SaaS platforms, digital services, subscription products, and any system requiring localized pricing and flexible plan configuration.
You can define pricing for multiple regions.
The component detects the user’s location via IP
Pricing updates automatically based on the matched region
Each pricing card can include:
Plan name
Price (per region)
Billing type (monthly / annual)
List of benefits
You can create optional add-ons that:
Attach to a pricing plan
Increase the total cost dynamically
You can set add-ons for each region
You can fully control the visual design:
Solid colors or gradient styles
Layout structure and spacing
Reordering of elements
Typography and hierarchy
Benefits can include:
Standard icons
Dynamic/custom icons
Set current plan
Customize tags
This improves clarity and visual appeal of plan features.
SaaS pricing pages
Subscription-based platforms
Digital product pricing
Global service offerings
Tiered membership plans
This is the latest version, which now allows you to:
Add add-ons for each region. You do this by creating the add-ons and then matching the respective price for each region.
Customize how you want the button to appear: Either Always On or On Hover. This also changes the appearance of the component.
Auto-attachment of plan, add-ons to the button.
Isaac Alipoe
