Pricing Page Builder

---
name: pricing-page-builder
description: Use when generating a pricing page with tiers, toggle, comparison table, and FAQ. Triggers on "pricing page", "build pricing", "tier comparison page".
---

# Pricing Page Builder

Pricing pages are conversion-critical. Most fail because they're either deceptive (cheap headline price hides usage charges), confusing (12 plans), or evasive ("Contact sales" for $100/mo SMB tools). Be direct.

## Required inputs

1. **Tiers** — 2-4 plans (3 is the sweet spot). For each: name, monthly price, annual price (or % savings), 5-8 included features, target user persona.
2. **Recommended plan** — which tier you want most users on (highlight it)
3. **Cycle toggle** — monthly + annual (default annual selected if it saves money)
4. **Feature comparison table** — 8-15 rows of feature × tier with check / dash / "Unlimited" / number
5. **Add-ons or usage pricing** — anything beyond the base tier
6. **FAQ** — 5-8 questions buyers actually ask (refunds, plan changes, taxes, seat-based or feature-based?, free trial, custom plans)

If your "Pro" tier doesn't have a clear ICP, push back. Tiers without personas confuse buyers.

## Output format

Single HTML file or React component, Tailwind styling. Mobile-first.

## Layout structure

1. **Header** (`text-center`) — H1: "Pricing", sub: positioning sentence ("Start free. Pay as you grow.")
2. **Toggle** — monthly / annual segmented control. Annual shows "Save 20%" badge.
3. **Tier cards** — `grid md:grid-cols-3 gap-6` (or 4 cols if 4 tiers)
4. **Feature comparison table** — full breakdown. Sticky header on long tables.
5. **Logos / social proof** — "Trusted by..." strip
6. **FAQ** — `<details>` accordion
7. **Final CTA** — "Still not sure? Talk to us" with calendar link

## Tier card pattern

```
<div class="rounded-2xl border bg-white p-8 [&[data-popular=true]]:ring-2 [&[data-popular=true]]:ring-indigo-600">
  <header>
    <h3 class="text-lg font-semibold text-gray-900">Pro</h3>
    <p class="mt-1 text-sm text-gray-500">For growing teams</p>
  </header>
  <p class="mt-6">
    <span class="text-5xl font-semibold tracking-tight text-gray-900 tabular-nums">$29</span>
    <span class="text-base text-gray-500">/mo</span>
  </p>
  <p class="text-sm text-gray-500">Billed annually. $35/mo billed monthly.</p>
  <a href="/signup?plan=pro" class="mt-8 block rounded-lg bg-indigo-600 px-4 py-3 text-center text-sm font-medium text-white hover:bg-indigo-700">
    Start free trial
  </a>
  <ul class="mt-8 space-y-3 text-sm text-gray-700">
    <li class="flex gap-2"><CheckIcon /> Unlimited projects</li>
    <li class="flex gap-2"><CheckIcon /> 10 team members</li>
    ...
  </ul>
</div>
```

## Highlighting the recommended plan

- `ring-2 ring-indigo-600` on the card
- Optional: `scale-105` on desktop only (`md:scale-105`)
- Badge at top: "Most popular" or "Recommended"
- DON'T also make it the cheapest — recommend the tier you actually want them on

## Monthly / annual toggle

- Segmented control with two pills, ARIA: `role="tablist"` or `role="radiogroup"`
- Default to annual if it saves money (anchoring effect)
- Show savings: "Save 20%" or "$58 saved/year" — actual numbers convert better than %
- Update prices in place; don't navigate

## Comparison table

- Sticky header at `top-14` (under main nav)
- Group rows by category (`<tr><th colspan="N">Collaboration</th></tr>`)
- Cells: ✓ for "included", "—" for "not included", number/quota where applicable
- "Unlimited" in plain text — don't symbol it
- Mobile: convert to per-tier sections (each tier shows its features as a list)

## Enterprise / custom tier

- "Contact sales" instead of a price IF the deal is genuinely custom
- Even then, show a starting point: "Custom plans starting at $X/yr"
- CTA: "Book a call" with a calendar widget, not "Submit form, we'll get back to you"

## FAQ — the questions buyers actually ask

Avoid softballs. Address:
- Can I switch plans later?
- What's included in the free trial?
- Do you charge per user or per workspace?
- Are there setup fees / overage fees / hidden fees?
- What if I exceed my limits?
- Do you offer refunds?
- Is the price in USD? With tax?
- Discounts for non-profits / startups / annual prepay?

## Accessibility

- Toggle: `role="radiogroup"` with `<input type="radio">` underneath, label associated
- Each tier card is a `<section aria-labelledby="tier-pro">` with the tier name as the heading
- Comparison table: `<caption class="sr-only">Pricing tier feature comparison</caption>`
- Check / dash icons: `aria-label="included"` or `aria-label="not included"` (don't rely on shape alone)
- Color: green check + red dash isn't enough; use shape too

## Anti-patterns

- **Cheapest plan in the middle, recommended**: erodes trust. Recommend the right tier; price the cheap one elsewhere.
- **Hidden usage costs**: "$0/mo" tier with "$0.50/request after 100" buried in fine print. Be upfront.
- **5+ tiers**: nobody reads them. Cap at 4. If you genuinely have many SKUs, build a configurator.
- **Toggle that hides annual savings**: anchor on annual; show monthly equivalent below.
- **"Contact sales" for sub-$100/mo plans**: friction without justification.
- **Table with "Standard / Pro / Enterprise" and feature rows that are all checks**: useless. Differentiate.
- **No "Most popular" highlighted**: leaves the choice to the user. Help them.

## Output

Return the pricing page (HTML/React) + comparison table + FAQ section. Top comment lists:
- Tiers shown
- Toggle behavior (default cycle, savings %)
- Highlighted plan
- A11y checks (toggle semantics, table caption, icon labels)