Billing Toggle Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, icon (a Lucide icon), description, monthly price, yearly price (the monthly amount when billed yearly), features with their featureHeading, the call to action's cta label and href, featured and an optional badge. The saving is never typed: savedOf works each plan's dollars out from its two prices, and the switch's mark and the headline show the largest percentage, so they stay right when a price changes. CURRENCY is the symbol written before every price. The billing state starts at "monthly"; start it at "yearly" to open on the lower prices.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point href at your checkout or sign-up route and add the billing period to it, for example /checkout?plan=plus&billing=yearly, then let your server map the plan and period to your payment provider's price.

Yes. The switch is a SegmentGroup, a radio group named "Billing period": Tab reaches the selected period and the arrow keys move and select. The Yearly side reads "Yearly, saves 20%": the visible minus sign is hidden from screen readers in favour of those words. Each price keeps its current amount in text and isn't a live region, so changing the period doesn't interrupt a screen reader. Plans are h3 headings under the section's h2, features are lists, and each call to action names its plan, as in "Start 14-day trial, Plus plan".

The digits are tabular (tabular-nums), so a price keeps its width as it rolls, and the line under it keeps its room for both periods ("Billed monthly. Yearly saves $36." and "Billed at $144 a year. Saves $36."). On wide screens the three cards share their rows through CSS subgrid, so the raised panels and the feature lists start on the same lines and the buttons line up whatever the descriptions' lengths. Under reduced motion the digits change in place and the cards appear without their entrance.

Below lg one plan shows at a time. A Plan switch under the header (a radio group named "Plan", Plus selected first) chooses which; the others are made invisible but keep their room, so nothing in them takes focus and switching plans moves nothing below. Each card's feature list is cut after five items, with a button ("All 7 features") that has aria-expanded and opens the rest. The call to action sits above the list, so it lands within the first screen and a half of an iPhone.

Move featured: true and the badge to that plan, or set featured to false on every plan. The featured plan's button is the default (primary) variant and the others are outline, so the theme's colour marks one action. On wide screens the featured card also runs a little past the others at the top and bottom, its shell is bg-muted/50 and its raised panel casts a stronger shadow. The plan that is selected first on a phone is the featured one.

Use a toggle when only the price changes between periods: visitors compare both in place and the page stays short. Show separate sections, or a comparison table, when yearly plans come with different features or terms, so nothing that differs hides behind the switch.