Spec Sheet Columns Pricing Block for React

PLANS lists the columns: each plan has an id, a name, a size line, a monthly price, the call to action's cta and href, and popular: true with a badge on the column to tint. SPEC_GROUPS lists the groups, each with a title and its specs; a spec has a label and values, one per plan id. Write a value as it should read ("16 GB", "Hourly × 30"), or null where the plan has none: it shows a dash and reads as "Not included". Add a plan by adding it to PlanId, PLANS and every spec's values; TypeScript flags any row you miss.

It is a real table named by the section's heading. Plan names are the column headers and each spec's label is its row's header, so a value is read with both ("Pro, Memory, 16 GB"). Each group is its own table body that starts with a header for the whole group, so moving into the Storage rows announces "Storage". Prices sit in a row headed "Price", and each call to action carries its plan's name ("Deploy server, Pro plan").

Below md a plan switch (a radio group) appears over the table with the recommended plan selected, and the table shows the spec labels beside that one plan's column: its name, size, price and call to action first, then every group. Nothing scrolls sideways, and switching plan swaps the column in place. Both layouts are rendered from the same data and the one not in use is display: none, so assistive technology meets only one. From md the three columns fit side by side.

Each call to action is a real link to its plan's href: send the plans to your deploy flow with the plan in the URL (/deploy?plan=pro), and point a top plan at your sales form if you sell it by quote. The link is render={<a href={plan.href} />} on ShineButton, with nativeButton={false}.

The header fades and lifts in, then the table follows 150 milliseconds later. It's all CSS transitions with @starting-style, no JavaScript, and the rows themselves don't animate, since a transform on a table row isn't reliable across browsers. With reduced motion on, everything shows at once.

Use it when buyers compare numbers: cores, memory, storage, bandwidth, SLAs. Engineers and procurement teams read a datasheet faster than marketing bullets, and monospaced values line up for scanning. For products sold on outcomes rather than specs, plan cards with short feature lists convert better.