Tri Plan Pricing
Overview
Quarterly, yearly and lifetime pricing tiers with large serif prices and struck-through list prices. A slider switch on top toggles between Library and Site builder and the prices fade to update; the recommended tier is a black card with a purple button and a Limited seats badge.
Taken from the page template Lingye Design Prompt Library Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Tri Plan Pricing to your project in your colors.
Where to use it
SaaS pricing pages, upgrade dialogs, plan comparisons and monthly / yearly toggles.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add tri-plan-pricing-toggle
mcp › Use 8pt MCP to call get_component("tri-plan-pricing-toggle")
Code
Source for Tri Plan Pricing. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tpp"><div class="tpp-seg"><i class="tpp-th"></i><button class="on" data-k="a">资源库</button><button data-k="b">建站器</button></div><div class="tpp-grid"><div class="tpp-c"><b class="tpp-n">季度</b><small class="tpp-s">合理使用 · 三个月</small><div class="tpp-p"><strong data-a="¥299" data-b="¥399">¥299</strong></div><small class="tpp-note">每三个月计费，随时取消</small><a href="#" class="tpp-btn">开通季度会员</a><ul><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每日可复制组件提示词</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每日可复制模板提示词</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>全部会员区块</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>全部会员模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>动态背景</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每周新模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>后续会员资源</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>浏览器插件</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>个人与客户项目</li></ul></div><div class="tpp-c"><b class="tpp-n">年度</b><small class="tpp-s">提示词不限量 · 一年</small><div class="tpp-p"><strong data-a="¥599" data-b="¥899">¥599</strong></div><small class="tpp-note">整年使用，随时取消</small><a href="#" class="tpp-btn">开通年度会员</a><ul><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>组件提示词不限量</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>模板提示词不限量</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>模板与区块源码</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>全部会员区块与模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>动态背景</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>棱页 MCP<em>新</em></li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每周新模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>会员社群</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>浏览器插件</li></ul></div><div class="tpp-c hot"><span class="tpp-badge">★ 限量名额</span><b class="tpp-n">终身</b><small class="tpp-s">提示词不限量 · 长期使用</small><div class="tpp-p"><s>¥2499</s><strong data-a="¥1199" data-b="¥1699">¥1199</strong></div><small class="tpp-note">一次付费，长期使用</small><a href="#" class="tpp-btn">一次付费，长期使用</a><ul><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>组件提示词不限量</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>模板提示词不限量</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>模板与区块源码</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>全部会员区块与模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>动态背景</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>棱页 MCP<em>新</em></li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每周新模板</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>会员社群</li><li><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>优先支持</li></ul></div></div></div>
.x-tpp{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-tpp,.x-tpp *{box-sizing:border-box}.x-tpp a{color:inherit;text-decoration:none}.x-tpp button{font:inherit;cursor:pointer}.x-tpp{width:100%;max-width:1120px;margin:0 auto;color:var(--ink)}.x-tpp .tpp-seg{position:relative;display:flex;width:max-content;margin:0 auto 32px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line)}.x-tpp .tpp-seg button{position:relative;z-index:1;width:80px;height:32px;border:0;background:none;border-radius:999px;font-size:13px;color:#52525B;transition:color .25s}.x-tpp .tpp-seg button.on{color:#fff}.x-tpp .tpp-th{position:absolute;left:4px;top:4px;width:80px;height:32px;border-radius:999px;background:var(--pur);transition:transform .3s cubic-bezier(.3,.8,.3,1)}.x-tpp .tpp-seg.b .tpp-th{transform:translateX(80px)}.x-tpp .tpp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.x-tpp .tpp-c{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px;transition:transform .3s,box-shadow .3s}.x-tpp .tpp-c:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(16,16,24,.35)}.x-tpp .tpp-c.hot{background:#0B0B0F;color:#fff;border-color:#0B0B0F;box-shadow:0 30px 60px -30px rgba(124,58,237,.7)}.x-tpp .tpp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:#0B0B0F;background:#fff;border:1.5px solid var(--pur);padding:4px 10px;border-radius:999px;white-space:nowrap}.x-tpp .tpp-n{display:block;font-size:17px;font-weight:700}.x-tpp .tpp-s{display:block;font-size:12px;color:var(--mut);margin-top:4px}.x-tpp .hot .tpp-s,.x-tpp .hot .tpp-note{color:#A1A1AA}.x-tpp .tpp-p{display:flex;align-items:baseline;gap:8px;margin:26px 0 4px;font-family:"Noto Serif SC","Songti SC",serif}.x-tpp .tpp-p strong{font-size:48px;font-weight:400;letter-spacing:-.03em;transition:opacity .2s}.x-tpp .tpp-p strong.fade{opacity:0}.x-tpp .tpp-p s{font-size:30px;color:#71717A}.x-tpp .tpp-note{display:block;font-size:12px;color:var(--mut)}.x-tpp .tpp-btn{display:flex;justify-content:center;align-items:center;height:42px;margin:18px 0 20px;border-radius:9px;background:#0B0B0F;color:#fff;font-size:13px;font-weight:600;transition:background .2s}.x-tpp .tpp-btn:hover{background:#27272A}.x-tpp .hot .tpp-btn{background:var(--pur)}.x-tpp .hot .tpp-btn:hover{background:#6D28D9}.x-tpp ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.x-tpp li{display:flex;align-items:center;gap:9px;font-size:13px;color:#3F3F46}.x-tpp .hot li{color:#E4E4E7}.x-tpp li svg{flex:none;color:#0B0B0F}.x-tpp .hot li svg{color:var(--pur2)}.x-tpp li em{font-style:normal;font-size:10px;font-weight:600;color:#fff;background:#EF4444;padding:1px 6px;border-radius:4px}@media (max-width:900px){.x-tpp .tpp-grid{grid-template-columns:1fr;gap:26px}}@media (prefers-reduced-motion:reduce){.x-tpp *{transition:none!important}}.x-tpp{max-width:none;padding:56px 5%;background-image:radial-gradient(rgba(16,16,24,.1) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-tpp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const seg = root.querySelector('.tpp-seg'), btns = [...seg.querySelectorAll('button')], prices = [...root.querySelectorAll('.tpp-p strong')];
let t;
const onClick = (e) => {
const k = e.currentTarget.dataset.k;
btns.forEach(b => b.classList.toggle('on', b === e.currentTarget)); seg.classList.toggle('b', k === 'b');
prices.forEach(p => p.classList.add('fade')); clearTimeout(t);
t = setTimeout(() => prices.forEach(p => { p.textContent = p.dataset[k]; p.classList.remove('fade'); }), 200);
};
btns.forEach(b => b.addEventListener('click', onClick));
return () => { clearTimeout(t); btns.forEach(b => b.removeEventListener('click', onClick)); };
}Subscribe to Builder to see the full source.See pricing