Compare Tray Pricing Block for React

Edit PLANS for the chips and the table's head (each plan has its name, amount, the chip's chip line, the price's note, the call to action's cta and href, and popular) and ROWS for the limits. A row has a label and a values record keyed by plan id: true shows a check, false a dash, and text shows as written. MIN_COMPARED is how many plans open the tray, and the starting list in useState (Growth and Business) is what's ticked on load: change it to open on others, or on none.

It's a CSS grid whose single row grows from 0fr to 1fr, with a fade, once enough plans are ticked, so it opens to its content's height without measuring it. Closed, the panel is inert: its table and links can't be tabbed into or read until it opens. The columns follow the plans' order, whatever order they were ticked in. Under reduced motion it opens at once.

Each chip is a toggle button named for its plan, such as "Growth, $0.00025 an event", and announces whether it's pressed; the tick box is decorative. The status line in the header is a polite live region, so ticking a plan announces "Comparing 3 of 4 plans" or how many more are needed, without reading the table. The table has column and row headers, so a screen reader names the plan and the feature for each cell; checks and dashes read as Included and Not included. The scrolling table is a labelled region you can reach with Tab and scroll with the arrow keys.

The chips become a two-by-two grid and the table keeps its columns at a readable width, so it scrolls sideways. The feature column is pinned with a rule on its edge, and a fade on the table's end edge shows there is more to scroll. Each plan's price and call to action sit at the head of its column, so the first screen already holds the chips and the first button.

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}. The ticked plans are a plain array of ids, so you can add them to the link (/signup?plan=growth&compared=growth,business) to learn which plans buyers weigh against each other, or keep them in the URL so a shared link reopens the same comparison.

Use a tray when you sell four or more plans but most buyers decide between two or three: the chips stay small and the detail appears only for the plans they care about. Show the full comparison table when buyers, such as procurement teams, need to see every plan against every other at once.