Pricing Tables That Don't Lie — the Toggle, the Matrix and the Mobile Collapse

Every pricing page is three decisions wearing a table: how many tiers, monthly-vs-annual, and how much feature detail before the buyer's eyes glaze. Get any of them wrong and the page reads as either thin or sneaky — and sneaky is worse.

Velocity X splits the job across components instead of one mega-table: pricing-table for the tier lineup (pure Astro, zero JS), pricing-toggle for the billing switch, and pricing-feature-matrix when the feature list genuinely needs a grid.

The Money Pattern

The toggle is the only part that needs state, and it's one boolean — not a tab system:

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

<button role="switch" aria-checked={annual}
        onClick={() => setAnnual(a => !a)}>
  Monthly / Annual <span>save 20%</span>
</button>

<p class="text-4xl font-semibold">
  ${annual ? tier.annualMonthly : tier.monthly}
  <span class="text-sm">/month</span>
</p>
{annual && <p class="text-xs">billed ${tier.annualTotal} yearly</p>}

The honesty rule is the last line: if the big number says "per month" while the card charges per year, say the billed total at the moment the toggle flips — not in a tooltip, not at checkout. The number a buyer is charged should never be a surprise, and "billed annually" in 10px grey is how pricing pages earn chargebacks.

The Catch

Mobile is where feature matrices die. A 4-column comparison grid collapses into hieroglyphics on a phone, and the usual fix — hiding columns — hides the tiers someone came to compare. Re-flow instead: the matrix becomes per-tier stacked cards, every tier still present, features as labelled rows inside each card.

And resist the urge to matrix everything. If every tier has the feature, it's not a comparison row — it's a reassurance line that belongs under the table, not inside it. Matrices earn their complexity only where tiers actually differ.

The Verdict

A pricing section is a trust exercise with a table attached. Big number matches the charge, every tier survives mobile, matrix only where tiers differ — that's the whole discipline. The decided versions live in Velocity X's E-Commerce category, installed as source you own.