Pricing Template

A complete pricing page for SaaS products. Three tiers, monthly/annual toggle, feature comparison matrix, and FAQ.

Install#

npx @aidimension/cli@latest add template pricing

What's included#

The template is a single ~250-line file with:

1. Header with logo and nav (same as landing page)
2. Page title + subtitle
3. Monthly/annual toggle with savings badge
4. 3 pricing cards (Free, Pro, Enterprise) — middle one highlighted as "Most popular"
5. Feature comparison matrix (full table with checkmarks)
6. FAQ section (accordion)
7. Final CTA banner
8. Footer

Customize#

Prices and tiers#

Edit the tiers array at the top of the file:

const tiers = [
  {
    name: "Free",
    monthlyPrice: 0,
    annualPrice: 0,
    description: "For individuals and small projects.",
    features: ["Up to 3 projects", "Community support"],
    cta: "Get started",
    highlighted: false,
  },
  {
    name: "Pro",
    monthlyPrice: 29,
    annualPrice: 290, // 2 months free
    description: "For growing teams.",
    features: [
      "Unlimited projects",
      "Priority support",
      "Advanced analytics",
    ],
    cta: "Start free trial",
    highlighted: true,
  },
  {
    name: "Enterprise",
    monthlyPrice: 99,
    annualPrice: 990,
    description: "For larger organizations.",
    features: ["Everything in Pro", "SSO", "Dedicated support", "Custom SLA"],
    cta: "Contact sales",
    highlighted: false,
  },
];

Toggle behavior#

The monthly/annual toggle is a controlled state:

const [annual, setAnnual] = useState(false);

<Switch checked={annual} onCheckedChange={setAnnual} />
<span>Annual <Badge>Save 20%</Badge></span>

The displayed price is computed:

{annual ? `$${tier.annualPrice}/yr` : `$${tier.monthlyPrice}/mo`}

Feature matrix#

Below the 3 cards, the template includes a full comparison table. Edit the features array:

const features = [
  { label: "Projects", values: ["3", "Unlimited", "Unlimited"] },
  { label: "Team members", values: ["1", "10", "Unlimited"] },
  { label: "Support", values: ["Community", "Priority", "Dedicated"] },
  // ...
];

Stripe integration#

The "Get started" button can deep-link into Stripe Checkout. Edit the CTA:

<a href="https://buy.stripe.com/your-price-id">
  <Button>{tier.cta}</Button>
</a>

For dynamic checkout, call your API:

async function handleSubscribe(tier: string) {
  const res = await fetch("/api/checkout", {
    method: "POST",
    body: JSON.stringify({ tier }),
  });
  const { url } = await res.json();
  window.location.href = url;
}

<Button onClick={() => handleSubscribe(tier.name)}>
  {tier.cta}</Button>

FAQ#

The FAQ uses the Accordion component. Edit the faqs array:

const faqs = [
  {
    q: "Can I cancel anytime?",
    a: "Yes, cancel from your dashboard at any time. No questions asked.",
  },
  // ...
];

Layout#

• 3 columns on desktop (≥ 1024px)
• Stacked on mobile (cards become full-width)
• Highlighted card scales up slightly and has a colored border

Conversion optimizations#

• 🎯 Middle tier is the "most popular" (anchoring effect)
• 🎯 Annual toggle shows savings badge (annual = 16% off)
• 🎯 Free tier has no credit card required
• 🎯 Enterprise tier has "Contact sales" (high-touch for big deals)
• 🎯 FAQ addresses top objections (cancel anytime, refund policy, etc.)

A/B testing ideas#

• Tier order — try Free, Pro, Enterprise vs Free, Pro, Business
• Price points — $19 / $49 / $99 vs $29 / $79 / $149
• CTA copy — "Get started" vs "Try free" vs "Start trial"
• Annual default — pre-select annual vs monthly

Performance#

• ✅ Single page, no extra routes
• ✅ ~10 KB gzipped
• ✅ All Server Components, zero client JS unless you add the Stripe handler
• ✅ Lighthouse 100/100/100/100

Next steps#

• Landing Page template — full marketing site
• Dashboard template — authed product
• Templates overview — all 6 templates