Prism Pricing Table

Prism Pricing Grid is a geo-smart pricing table for serious SaaS products.It combines a clean comparison table, optional pricing cards, and smart regional logic in a single Framer-native component.

💰 Geo Pricing Engine

Prism ships with three geo modes:

• Off – Classic pricing table. No geo, no magic.

• PPP Auto – Detects the visitor’s country and applies a configurable PPP discount for selected regions (e.g. TR, IN, BR…). Currency symbol updates automatically.

• Geo Pro – Set US / EU / UK prices per plan. The component picks the right region based on the visitor’s country, with graceful fallback to your base price.

You can also:

• Toggle the PPP banner on/off

• Customise the banner text with {country} and {discount} tokens

🧩 Layout & UX

• Layout modes: Table, Cards, or Hybrid (Cards + Table)

• Responsive by design:

  • Automatically switches to card layout on small widths

• Sticky table header (optional) for long comparison lists

• Category groups:

  • Core / Advanced / Support…

  • Collapsible sections

  • Or turn category headers off for a flat list

📊 Features & Data Model

• Up to 4 plans (Starter / Pro / Business / Enterprise, etc.)

• Each feature row supports:

  • Boolean: checkmark / dash

  • Custom text: e.g. 5 users, 50 GB, 99.9% SLA

• Tooltips for feature explanations

• Works great for both simple and very detailed comparisons

🔧 Data Input Options

• Manual mode (Panel)

  • Edit plans, features, pricing and labels directly from the Framer panel

• JSON mode

  • Paste plansJSON and featuresJSON for advanced or external setups

🎨 Themes, Colors & Type

• 6 built-in themes: Noir, Aurora, Frost, Sunset, Mint, Lavender

• Optional Custom Colors to override backgrounds, borders, text, accent, success, dividers and buttons

• Full typography controls for:

  • Header title

  • Header subtitle

  • Plan titles

  • Prices

  • Body text

  • Buttons

⚙️ Quality-of-life Options

• Monthly / Yearly billing toggle with savings label

• Optional plan icons (Lucide)

• Optional feature list inside cards

• Toggle to disable all animations for a static feel or perf-sensitive pages

• Helpful empty states when no plans are configured

How to Use

1. Drop Prism Pricing Grid into your canvas.

2. Configure your plans and features under the Content group.

3. Choose a Geo Mode and, if needed, set PPP or regional prices.

4. Pick a theme or switch on Custom Colors to match your brand.

5. Adjust layout, spacing and typography, then connect buttons to your checkout or signup pages.

That’s it — one component that handles modern SaaS pricing, from simple to global.