Edit Pricing Tier · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"tier{{#if highlighted}} tier--highlighted{{/if}}\" style=\"--accent:{{accent}};\">\n  {{#if highlighted}}<span class=\"tier__badge\">Most popular</span>{{/if}}\n  <p class=\"tier__name\">{{planName}}</p>\n  <p class=\"tier__price\"><span>$</span>{{price}}<small>/mo</small></p>\n  <ul class=\"tier__features\">\n    <li>Unlimited projects</li>\n    <li>Priority support</li>\n    <li>Team analytics</li>\n  </ul>\n  <button type=\"button\" class=\"tier__cta\">{{ctaText}}</button>\n</div>\n<style>\n.tier { font: 15px system-ui, sans-serif; color: #241430; max-width: 240px; padding: 24px; border-radius: 16px; border: 1.5px solid #24143022; background: #FAF7F2; position: relative; }\n.tier--highlighted { border-color: var(--accent); box-shadow: 0 16px 32px rgba(36,20,48,.14); }\n.tier__badge { position: absolute; top: -12px; left: 24px; background: var(--accent); color: #FAF7F2; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }\n.tier__name { margin: 0 0 6px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: #241430aa; }\n.tier__price { margin: 0 0 18px; font-size: 34px; font-weight: 800; }\n.tier__price span { font-size: 20px; vertical-align: top; }\n.tier__price small { font-size: 14px; font-weight: 500; color: #241430aa; }\n.tier__features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #241430cc; }\n.tier__features li::before { content: \"\\2713\"; color: var(--accent); font-weight: 700; margin-right: 8px; }\n.tier__cta { width: 100%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); padding: 10px; border-radius: 8px; font-weight: 700; cursor: pointer; }\n.tier--highlighted .tier__cta { background: var(--accent); color: #FAF7F2; }\n.tier__cta:hover, .tier__cta:focus-visible { opacity: .9; }\n</style>",
  "tailwind": "<div class=\"tier-tw{{#if highlighted}} tier-tw--highlighted{{/if}} relative font-sans text-[15px] text-[#241430] max-w-[240px] p-6 rounded-2xl border-[1.5px] border-[#24143022] bg-[#FAF7F2]\" style=\"--accent:{{accent}};\">\n  {{#if highlighted}}<span class=\"absolute -top-3 left-6 text-[#FAF7F2] text-[11px] font-bold px-2.5 py-1 rounded-full\" style=\"background:{{accent}};\">Most popular</span>{{/if}}\n  <p class=\"m-0 mb-1.5 font-bold uppercase text-xs tracking-wide text-[#241430]/65\">{{planName}}</p>\n  <p class=\"m-0 mb-4.5 text-[34px] font-extrabold\"><span class=\"text-xl align-top\">$</span>{{price}}<small class=\"text-sm font-medium text-[#241430]/65\">/mo</small></p>\n  <ul class=\"list-none m-0 mb-5 p-0 flex flex-col gap-2 text-sm text-[#241430]/80\">\n    <li>&#10003; Unlimited projects</li>\n    <li>&#10003; Priority support</li>\n    <li>&#10003; Team analytics</li>\n  </ul>\n  <button type=\"button\" class=\"tier-tw__cta w-full border-[1.5px] bg-transparent px-0 py-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90\" style=\"border-color:{{accent}};color:{{accent}};\">{{ctaText}}</button>\n</div>\n<style>\n.tier-tw--highlighted { box-shadow: 0 16px 32px rgba(36,20,48,.14); }\n.tier-tw--highlighted .tier-tw__cta { background: var(--accent); color: #FAF7F2; }\n</style>",
  "react": "export function PricingTier({\n  planName = \"{{planName}}\",\n  price = {{price}},\n  ctaText = \"{{ctaText}}\",\n  highlighted = {{highlighted}},\n  accent = \"{{accent}}\",\n}) {\n  return (\n    <div style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", maxWidth: 240, padding: 24, borderRadius: 16,\n      border: `1.5px solid ${highlighted ? accent : \"#24143022\"}`, background: \"#FAF7F2\", position: \"relative\",\n      boxShadow: highlighted ? \"0 16px 32px rgba(36,20,48,.14)\" : \"none\" }}>\n      {highlighted && (\n        <span style={{ position: \"absolute\", top: -12, left: 24, background: accent, color: \"#FAF7F2\", fontSize: 11,\n          fontWeight: 700, padding: \"4px 10px\", borderRadius: 999 }}>Most popular</span>\n      )}\n      <p style={{ margin: \"0 0 6px\", fontWeight: 700, textTransform: \"uppercase\", fontSize: 12, letterSpacing: \"0.05em\", color: \"#241430aa\" }}>{planName}</p>\n      <p style={{ margin: \"0 0 18px\", fontSize: 34, fontWeight: 800 }}>\n        <span style={{ fontSize: 20, verticalAlign: \"top\" }}>$</span>{price}<small style={{ fontSize: 14, fontWeight: 500, color: \"#241430aa\" }}>/mo</small>\n      </p>\n      <ul style={{ listStyle: \"none\", margin: \"0 0 20px\", padding: 0, display: \"flex\", flexDirection: \"column\", gap: 8, fontSize: 14, color: \"#241430cc\" }}>\n        <li>&#10003; Unlimited projects</li>\n        <li>&#10003; Priority support</li>\n        <li>&#10003; Team analytics</li>\n      </ul>\n      <button type=\"button\" style={{ width: \"100%\", border: `1.5px solid ${accent}`,\n        background: highlighted ? accent : \"transparent\", color: highlighted ? \"#FAF7F2\" : accent,\n        padding: 10, borderRadius: 8, fontWeight: 700, cursor: \"pointer\" }}>{ctaText}</button>\n    </div>\n  );\n}"
}