Annual Savings Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, description, monthly price (one month, paid monthly), yearly price (one year, paid once), features, the call to action's cta and href, featured for the raised plan, an optional badge, and perUser for a price written per user. You never type a saving: savedOf and percentOf work them out from the two prices, the gap in each chart shows the dollars, and the headline shows the largest percentage, so they stay right when a price changes. CURRENCY is the symbol written before every price.

The left bar is twelve monthly payments and always runs the full height; the right bar is the yearly payment, with its height set as a share of the left one through a CSS variable. The gap above it is an outlined box exactly as tall as the saving, so the bar and the gap always add up to the left bar. The switch changes the fill, not the heights: the bar for the period you picked is solid and the other is pale. The chart is decorative, so a screen reader skips it and reads a sentence instead: what twelve monthly payments cost, what one yearly payment costs and what the year saves.

Each call to action is a real link to its plan's href: add the billing period to it, for example /checkout?plan=pro&billing=yearly, and let your server map the plan and period to your payment provider's price. Work the amount out again on the server; never trust a price sent from the page. It's a ShineButton with render set to an a element and nativeButton={false}.

Below lg the three cells collapse into one, so the first screen holds the header, a Plan switch and the chosen plan: its chart, price and call to action. The switch is a radio group named "Plan", Pro is selected first, and the plans you didn't pick are made invisible, not just faded, so nothing in them can take focus or be read; they keep their room, so switching plans moves nothing below. The feature list is cut after five items, with a button ("All 7 features") that has aria-expanded and opens the rest; Personal has exactly five, so it has no button.

Yes. Both switches are radio groups, "Billing period" and "Plan": Tab reaches the selected option and the arrow keys move and select. Plans are h3 headings under the section's h2, features are lists, and each call to action names its plan ("Start free for 14 days, Pro plan"). Each price keeps its amount in text with "per month" or "per user per month" read out, and the featured plan is set apart by structure (a shadow, a badge, the filled button), not colour. Prices aren't a live region, so switching period doesn't interrupt a screen reader.

The chart keeps its height and only changes fill, the digits are tabular, and the line under each price always takes one line (Billed yearly at $60 or Billed monthly, cancel anytime). On wide screens the three cells share their rows through CSS subgrid, so names, charts, prices, buttons and feature lists start on the same lines whatever the descriptions' lengths. Under reduced motion the prices change in place and the bars appear without growing.