4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tad6,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .ai-card .num { color: var(--acc2) !important; } /* ---------- Section Q · domain packs ---------- */ .pricing { display: flex; gap: 12px; width: 90%; align-items: stretch; } .tier { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1rem; position: relative; } .tier.hot { border-color: rgba(183,255,46,.5); } .tier .t-name { font: 500 .68rem var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .15em; } .tier .t-price { font: 700 1.8rem var(--sans); margin: .5rem 0 .2rem; font-variant-numeric: tabular-nums; } .tier .t-price small { font-size: .8rem; color: var(--dim); font-weight: 400; } .tier .t-feat { font: 400 .64rem var(--mono); color: var(--dim); line-height: 1.9; } .tier .t-pop { position: absolute; top: -9px; right: 12px; font: 500 .55rem var(--mono); background: var(--acc); color: #0a0a0e; border-radius: 99px; padding: .3em .8em; } .bill-toggle { display: flex; align-items: center; gap: .6rem; font: 400 .68rem var(--mono); color: var(--dim); margin-bottom: 1.1rem; } .bill-toggle .sw { width: 40px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); border: 0; position: relative; } .bill-toggle .sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--acc); transition: transform .35s cubic-bezier(.76,0,.24,1); } .bill-toggle.annual .sw i { transform: translateX(18px); } .bill-toggle .save { color: var(--acc); } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }52:Td41,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // SaaS pricing — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

SaaS pricing table

SaaS

React \u2197

monthly annual save 20%

Say: \"pricing = 117\" \u2014 tiered table with billing toggle and rolling prices. The SaaS conversion workhorse.

"; export function SaasPricing() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { /* ---- 117 · SaaS pricing ---- */ { const TIERS = [ { name: 'Starter', m: 29, feats: ['1 storefront', 'core patterns', 'email support'] }, { name: 'Studio', m: 79, hot: true, feats: ['3 storefronts', 'AI concierge', 'priority renders'] }, { name: 'House', m: 199, feats: ['unlimited', 'agent back-office', 'white glove'] }, ]; const wrap = document.getElementById('pricing'); const toggle = document.getElementById('bill-toggle'); const priceEls = []; TIERS.forEach((t) => { const d = document.createElement('div'); d.className = 'tier' + (t.hot ? ' hot' : ''); d.innerHTML = `${t.hot ? 'popular' : ''}

${t.name}

$${t.m}/mo

${t.feats.join('
')}

`; wrap.appendChild(d); priceEls.push(d.querySelector('.t-price span')); }); let annual = false; toggle.querySelector('.sw').addEventListener('click', () => { annual = !annual; toggle.classList.toggle('annual', annual); TIERS.forEach((t, i) => { const target = annual ? Math.round(t.m * 0.8) : t.m; const obj = { v: Number(priceEls[i].textContent) }; gsap.to(obj, { v: target, duration: 0.6, ease: 'power2.out', onUpdate: () => (priceEls[i].textContent = Math.round(obj.v)) }); }); }); } } catch (err: any) { console.warn("[motion-menu] saas-pricing failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default SaasPricing; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","gsap",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"gsap"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/saas-pricing.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/saas-pricing","itemId":"@motion-menu/saas-pricing"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"motion-menu/saas-pricing.html","content":"

117

SaaS pricing table

SaaS

React ↗

monthly annual save 20%

Say: \"pricing = 117\" — tiered table with billing toggle and rolling prices. The SaaS conversion workhorse.

","type":"registry:file","target":"motion-menu/saas-pricing.html"},{"path":"motion-menu/saas-pricing.css","content":"$51","type":"registry:file","target":"motion-menu/saas-pricing.css"},{"path":"components/motion-menu/saas-pricing.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

SaaS Pricing

Installation

Files

motion-menu

components

Styles