Feature Diff Pricing Block for React

UPGRADE names the two plans (from and to), the monthly price, the billing note and the call to action's cta and href. DIFFS holds the rows: each has the feature's name, its from and to values and an optional badge. Nothing is computed, so keep the chips true to the values beside them: 3,000 AI drafts are 100× the 30 on Free, and 20 collaborators are 10× the 2.

The rows are a description list: each feature is a term and its change the definition, read as "AI drafts: from 30 / mo, to 3,000 / mo, 100× more". Visually hidden "from" and "to" carry what the strike-through and the arrow show, and the arrows are hidden. The line above the price reads "From Free to Pro", and the price "$8 per month".

The two columns stack, with the price and the button first and the ledger below, so the button is on the first screen. Each row is a small grid: the feature's name sits above its values, so a long value like "PDF, Word, HTML" never squeezes the label. From the sm breakpoint the name and values share one line, and from lg the price column and the ledger sit side by side. The values wrap if a chip doesn't fit, and the arrows turn around in a right-to-left layout.

The call to action is a link. It's a ShineButton with render set to an a element and nativeButton={false}. Point href at your upgrade route; for a signed-in visitor, that route can start checkout for the Pro plan straight away, with their account already known.

Yes: build UPGRADE and DIFFS from the visitor's current plan and the next one up where the page is rendered, and pass them in. Show a row only where the value really changes, and leave out what both plans share, so the list stays short enough to read.

Use a diff when the visitor already uses the free plan and is deciding whether to upgrade: they know what they have, so seeing only what changes, row by row, answers the question. Side-by-side cards suit visitors comparing plans from scratch, who need each plan's full picture.