The Pricing Table element requires a Pro or Agency license. Learn about licensing.
Overview
The Pricing Table element displays subscription plans with feature comparison, making it easy for customers to choose the right plan. It supports a billing toggle (Monthly/Annual) that dynamically updates prices for each plan.
Plans can be highlighted to emphasize a recommended option, typically the middle "Pro" tier. Each plan includes a name, description, price, feature list, and call-to-action button.
Pricing tables are fully customizable with styling classes for cards, prices, features, and buttons, allowing you to match your brand's design system.
Settings
Configure the Pricing Table element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Toggle Items | Array of billing period options. Each has a label and isDefault flag. | Monthly, Annual |
| Plans | Array of pricing plan configurations with names, prices, and features. | Basic, Pro, Enterprise |
| Show Toggle | Display the billing period toggle switch. | true |
| Grid Columns | Number of plan columns to display. | 3 |
Toggle Styling Settings
Customize the appearance of the billing toggle:
| Setting | Description | Default |
|---|---|---|
| Toggle BG Class | Background container styling. | bg-gray-100 rounded-full p-1 inline-flex gap-1 |
| Toggle Active Class | Styling for the selected toggle option. | bg-white shadow |
| Toggle Inactive Class | Styling for unselected toggle options. | text-gray-600 |
Plan Styling Settings
Control the appearance of individual plan cards:
| Setting | Description | Default |
|---|---|---|
| Plan Class | Card container styling for each plan. | bg-white rounded-lg shadow-lg p-6 border border-gray-200 |
| Highlighted Class | Additional styling for the featured/recommended plan. | bg-blue-50 border-blue-500 border-2 |
| Name Class | Plan name styling. | text-2xl font-bold mb-2 |
| Description Class | Plan tagline styling. | text-gray-600 mb-4 |
| Price Class | Price display styling. | text-4xl font-bold mb-4 |
| Feature Class | Feature list item styling. | text-gray-700 |
| CTA Class | Call-to-action button styling. | w-full py-3 px-6 rounded bg-blue-600 text-white hover:bg-blue-700 |
Plan Structure
Each plan object in the plans array contains these properties:
| Property | Description | Example |
|---|---|---|
| name | Plan tier name. | "Basic", "Pro", "Enterprise" |
| description | Short tagline for the plan. | "Perfect for getting started" |
| prices[] | Array of prices per billing period. Each has toggleId and value. | [{ toggleId: "1", value: 9 }, { toggleId: "2", value: 90 }] |
| features | Newline-separated list of features included in the plan. | "Up to 10 users\n5GB storage\nEmail support" |
| ctaText | Button text for the call-to-action. | "Get Started", "Contact Sales" |
| ctaUrl | Button link destination. | "/signup?plan=pro" |
| highlighted | Boolean to mark this as the featured/recommended plan. | true |
Examples
3-Tier Pricing with Monthly/Annual Toggle
Standard SaaS pricing layout with highlighted middle plan.
{
"toggleItems": [
{ "id": "1", "label": "Monthly", "isDefault": true },
{ "id": "2", "label": "Annual" }
],
"plans": [
{
"name": "Starter",
"description": "For individuals",
"prices": [
{ "toggleId": "1", "value": 9 },
{ "toggleId": "2", "value": 90 }
],
"features": "1 user\n5 projects\nBasic analytics\nEmail support",
"ctaText": "Start Free Trial",
"ctaUrl": "/signup?plan=starter",
"highlighted": false
},
{
"name": "Professional",
"description": "For growing teams",
"prices": [
{ "toggleId": "1", "value": 29 },
{ "toggleId": "2", "value": 290 }
],
"features": "10 users\nUnlimited projects\nAdvanced analytics\nPriority support\nAPI access",
"ctaText": "Get Started",
"ctaUrl": "/signup?plan=pro",
"highlighted": true
},
{
"name": "Enterprise",
"description": "For large organizations",
"prices": [
{ "toggleId": "1", "value": 99 },
{ "toggleId": "2", "value": 990 }
],
"features": "Unlimited users\nUnlimited projects\nCustom analytics\n24/7 phone support\nDedicated manager",
"ctaText": "Contact Sales",
"ctaUrl": "/contact",
"highlighted": false
}
],
"showToggle": true
}Pricing with Highlighted Middle Plan
The highlighted plan stands out with distinct styling.
{
"planClass": "bg-white rounded-xl shadow p-8",
"highlightedClass": "bg-gradient-to-b from-blue-50 to-white border-2 border-blue-500 scale-105"
}Custom Toggle Labels
Use different terminology for your billing periods.
{
"toggleItems": [
{ "id": "1", "label": "Standard", "isDefault": true },
{ "id": "2", "label": "Premium" }
]
}Always highlight your recommended plan (typically the middle option). Use the Annual toggle to show savings with a badge like "Save 20%". Make the CTA button color match your brand's primary action color.