React pricing section components

Three tiers is the convention because it gives buyers a reference point. Shown a single price, people have no idea whether it is reasonable. Shown a cheap tier, a middle tier, and an expensive one, they judge the middle against its neighbours and usually pick it. That is anchoring, and it is why the highlighted plan in almost every pricing block sits in the centre column. If you only have two real plans, adding a fake third one is worse than shipping two, because inventing a tier nobody wants creates support questions you then have to answer.

Order the columns cheapest to most expensive left to right and let the highlighted card break the grid slightly, either taller or with a border and a badge. Feature lists should be cumulative, so each tier reads as "everything above, plus". Comparison becomes a scan down one column instead of a diff across three. Never hide the number that matters. "Contact sales" belongs on the enterprise card only, and the pricing page with a separate enterprise card exists precisely so that self-serve tiers keep their prices visible.

Monthly to yearly toggles are where layout breaks. When the price switches from 29 to 290 the string gets a character longer, the card reflows, and every card below it shifts. Reserve the width with tabular-nums and a fixed min-width on the price container, or animate the digits in place as the toggle blocks in this collection do. Put the discount label next to the toggle rather than inside the card, and default to whichever period you actually want people on, usually annual.

Two things buyers look for and rarely find. First, what happens at the limit: say whether you block, throttle, or charge overage, because an unanswered ceiling reads as a trap. Second, the trial and cancellation terms, in plain words, directly under the buttons. Both belong in the section itself, not in an FAQ two scrolls down. Every extra scroll between the price and the answer costs you conversions.