Edit Pricing Table

Name

Also known as (comma separated)

Brief definition Side-by-side presentation of pricing tiers.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Simple, transparent pricing" }, { "id": "highlightedPlan", "type": "select", "label": "Highlighted plan", "default": "Pro", "options": [ "Starter", "Pro", "Team" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "annualBilling", "type": "toggle", "label": "Annual billing", "default": false } ]

Templates (JSON object keyed by format) { "html": "<section class=\"ptable\" data-highlight=\"{{highlightedPlan}}\" style=\"--accent:{{accent}};\">\n <h2 class=\"ptable__heading\">{{heading}}</h2>\n <div class=\"ptable__cols\">\n <div class=\"ptable__col ptable__col--Starter\"><p class=\"ptable__name\">Starter</p><p class=\"ptable__price\">${{#if annualBilling}}9{{/if}}{{#unless annualBilling}}12{{/unless}}<small>/mo</small></p></div>\n <div class=\"ptable__col ptable__col--Pro\"><p class=\"ptable__name\">Pro</p><p class=\"ptable__price\">${{#if annualBilling}}24{{/if}}{{#unless annualBilling}}29{{/unless}}<small>/mo</small></p></div>\n <div class=\"ptable__col ptable__col--Team\"><p class=\"ptable__name\">Team</p><p class=\"ptable__price\">${{#if annualBilling}}49{{/if}}{{#unless annualBilling}}59{{/unless}}<small>/mo</small></p></div>\n </div>\n</section>\n<style>\n.ptable { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; text-align: center; }\n.ptable__heading { margin: 0 0 20px; font-size: 22px; font-weight: 700; }\n.ptable__cols { display: flex; gap: 16px; justify-content: center; }\n.ptable__col { flex: 1; max-width: 150px; padding: 18px; border-radius: 12px; border: 1.5px solid #24143022; }\n.ptable[data-highlight=\"Starter\"] .ptable__col--Starter,\n.ptable[data-highlight=\"Pro\"] .ptable__col--Pro,\n.ptable[data-highlight=\"Team\"] .ptable__col--Team { border-color: var(--accent); background: var(--accent); color: #FAF7F2; }\n.ptable__name { margin: 0 0 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }\n.ptable__price { margin: 0; font-size: 24px; font-weight: 800; }\n.ptable__price small { font-size: 12px; font-weight: 500; opacity: .75; }\n</style>", "tailwind": "<section class=\"ptable-tw ptable-tw--{{highlightedPlan}} font-sans text-[15px] text-[#241430] p-6 text-center\" style=\"--accent:{{accent}};\">\n <h2 class=\"m-0 mb-5 text-2xl font-bold\">{{heading}}</h2>\n <div class=\"flex gap-4 justify-center\">\n <div class=\"ptable-tw__col ptable-tw__col--Starter flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]\"><p class=\"m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide\">Starter</p><p class=\"m-0 text-2xl font-extrabold\">${{#if annualBilling}}9{{/if}}{{#unless annualBilling}}12{{/unless}}<small class=\"text-xs font-medium opacity-75\">/mo</small></p></div>\n <div class=\"ptable-tw__col ptable-tw__col--Pro flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]\"><p class=\"m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide\">Pro</p><p class=\"m-0 text-2xl font-extrabold\">${{#if annualBilling}}24{{/if}}{{#unless annualBilling}}29{{/unless}}<small class=\"text-xs font-medium opacity-75\">/mo</small></p></div>\n <div class=\"ptable-tw__col ptable-tw__col--Team flex-1 max-w-[150px] p-4.5 rounded-xl border-[1.5px] border-[#24143022]\"><p class=\"m-0 mb-1.5 font-bold text-[13px] uppercase tracking-wide\">Team</p><p class=\"m-0 text-2xl font-extrabold\">${{#if annualBilling}}49{{/if}}{{#unless annualBilling}}59{{/unless}}<small class=\"text-xs font-medium opacity-75\">/mo</small></p></div>\n </div>\n</section>\n<style>\n.ptable-tw--Starter .ptable-tw__col--Starter, .ptable-tw--Pro .ptable-tw__col--Pro, .ptable-tw--Team .ptable-tw__col--Team { border-color: var(--accent); background: var(--accent); color: #FAF7F2; }\n</style>", "react": "export function PricingTable({\n heading = \"{{heading}}\",\n highlightedPlan = \"{{highlightedPlan}}\",\n accent = \"{{accent}}\",\n annualBilling = {{annualBilling}},\n}) {\n const plans = [\n { name: \"Starter\", monthly: 12, annual: 9 },\n { name: \"Pro\", monthly: 29, annual: 24 },\n { name: \"Team\", monthly: 59, annual: 49 },\n ];\n return (\n <section style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 24, textAlign: \"center\" }}>\n <h2 style={{ margin: \"0 0 20px\", fontSize: 22, fontWeight: 700 }}>{heading}</h2>\n <div style={{ display: \"flex\", gap: 16, justifyContent: \"center\" }}>\n {plans.map((plan) => {\n const active = plan.name === highlightedPlan;\n return (\n <div key={plan.name} style={{ flex: 1, maxWidth: 150, padding: 18, borderRadius: 12,\n border: `1.5px solid ${active ? accent : \"#24143022\"}`, background: active ? accent : \"transparent\",\n color: active ? \"#FAF7F2\" : \"#241430\" }}>\n <p style={{ margin: \"0 0 6px\", fontWeight: 700, fontSize: 13, textTransform: \"uppercase\", letterSpacing: \"0.04em\" }}>{plan.name}</p>\n <p style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>\n ${annualBilling ? plan.annual : plan.monthly}<small style={{ fontSize: 12, fontWeight: 500, opacity: 0.75 }}>/mo</small>\n </p>\n </div>\n );\n })}\n </div>\n </section>\n );\n}" }