Free vs Pro Pricing Block for React

PLANS holds the two plans: the switch's label, the price, the line under it, and the call to action's cta and href. FEATURES holds the rows: each has a name, what Pro gets (pro) and what Free gets (free), or null where the feature is locked on Free. A row with the same text on both plans shows a check in both. Keep the list to about eight, so the card stays one screen.

The switch is a radio group named "Plan": arrow keys move and select, and the choice is announced as "Pro, 2 of 2". A status line hidden from sight says "Pro plan: $8 per month, 8 of 8 features unlocked" each time it changes, and every feature says whether it is locked on Free or included. The lock and check icons are hidden from assistive technology, so nothing is said twice.

The price and the locks change at once. The roll of the price (Sliding Number), the cross-fade of each lock into a check and the tint of the cells are all CSS transitions that switch off under prefers-reduced-motion, so the final state is the same, and nothing waits for an animation to finish before it can be read.

The call to action is a real link whose href comes from the chosen plan. It's a ShineButton with render set to an a element and nativeButton={false}. Point Free at your download or sign-up page and Pro at a checkout for the Pro plan, with the trial already selected.

Below the md breakpoint the card's head stacks: the switch across the full width, the price, then a full-width button, so the button sits within the first screen and a half, and the eight features follow in one column. From md the switch, the price and the button share one row and the features form two columns.

When the decision is a single upgrade and the question is what Pro adds. One list shows each feature once and changes in place, which is easier to read than two lists to compare. With three or more plans, or buyers who want to compare prices and limits at once, use plan cards or a table.