Three Columns Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, description, monthly price, yearly price (the monthly amount per user when billed yearly), a featureHeading such as "Everything in Personal, plus", features with an optional tooltip, the call to action's cta and href, an optional badge and popular. A plan whose prices are 0 shows Free and "Free forever" instead of a price. CURRENCY is the symbol written before every price. The billing state starts on "yearly"; start it at "monthly" to open on the higher prices.

Only the emphasis: popular: true gives the cell a card background and a soft shadow and its button the default variant, while the others use the outline variant. The Best value pill comes from badge, set separately, so a plan can have a badge without the emphasis, or the other way round. The popular plan is also the one selected first on a phone.

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 the paid plans at your checkout route with the billing period in the URL, for example /checkout?plan=team&billing=yearly, and Company's Contact sales at your sales form.

Yes. Each info icon is a real button named "More about" and the feature, and it opens a ToggleTooltip on click, tap, Enter or Space rather than on hover only, so it works on phones too. Escape or a click outside closes it. Keep the tooltip text supplementary: the feature itself is already written in the list.

Below lg a Plan switch (a radio group named "Plan", Team selected first) chooses which cell shows. The others are made invisible but keep their room, so nothing in them takes focus and switching plans moves nothing below. A feature list longer than five items is cut there, 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.

The billing switch and the Plan switch are radio groups: Tab reaches the selected option and the arrow keys change it. Plans are h3 headings under the section's h2, features are lists with decorative check icons, and each price says "per user per month" in visually hidden text. Every call to action names its plan, as in "Start 14-day trial, Team plan". Prices aren't a live region, so switching the period doesn't interrupt what's being read.

Use three columns for two or three tiers whose features build on each other: each cell answers "what do I get" at a glance and the raised cell guides the eye to the recommended plan. Switch to a comparison table, such as Comparison Table Pricing, when you have four or more plans or long feature lists that buyers compare row by row.