Popular Choice Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, description, monthly price, call to action (cta and href), a featureHeading and its features, and a share, the percentage of teams that chose it. The segments' widths come from share, so they follow whatever numbers you give them, but the shares should add up to 100. POPULAR_ID is the plan that opens first and gets the Most chosen badge and the primary button; the line under the bar says what the shares measure.

Work them out from your own subscriptions, for example the plans picked by every team that started a paid plan in the last 90 days, and say so in the line under the bar. Don't invent a figure: if you don't have the data, a bar of invented numbers is a false claim. Use a block without one, such as a featured plan with a badge, until you do.

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}. Add the plan to it, such as /checkout?plan=growth, and let your server pick the matching price from your payment provider.

Yes. It's a real tab list named "Plans, sized by the share of teams that chose them", and each segment is a tab named after its plan and its share, such as "Growth, chosen by 64% of teams". Tab reaches the selected segment, the arrow keys move between segments and open their plan, and the open plan is the tab panel. The coloured fill and the percentages are decorative copies of the tab's name, so a screen reader doesn't read them twice, and the open segment is marked by its solid fill and its darker percentage, not by colour alone.

The bar stays one row, its segments shrinking in proportion, so the 18% segments are still wide enough for their percentage and name at 320px. The open plan stacks: the price and the button come first, with the features under them, so the button is within the first screen and a half. Choosing another segment swaps the plan in place.

The band under the bar follows the open plan's feature list, so content below it moves a little when the lists differ in length (seven features each here, though their lines wrap differently on a phone). Keep the lists about the same length, or leave room under the block, if something sits directly below it.