component
Geo-Pricing Card
By Refinery Studio
Details
- Refinery StudioAuthor
- componentType
- 2026-03-31Published
- 2026-06-07Updated
- 2026-03-18Added
- CardsCategories
Summary
Geo-Adaptive pricing with add-ons
Description
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. How It Works 1. Set Regional Pricing You can define pricing for multiple regions. The component detects the user’s location via IP Pricing updates automatically based on the matched region 2. Configure Plan Details Each pricing card can include: Plan name Price (per region) Billing type (monthly / annual) List of benefits 3. Add Add-Ons 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 4. Customize Appearance You can fully control the visual design: Solid colors or gradient styles Layout structure and spacing Reordering of elements Typography and hierarchy 5. Enhance Benefits Display Benefits can include: Standard icons Dynamic/custom icons Set current plan Customize tags This improves clarity and visual appeal of plan features. Use Cases SaaS pricing pages Subscription-based platforms Digital product pricing Global service offerings Tiered membership plans VERSION 2 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.
Introduction
Geo-Adaptive pricing with add-ons
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #2309