Comparison Table Pricing Block for React

Edit the two arrays at the top of the file. PLANS holds each plan's name, tagline, call to action and href, its prices per user a month for each billing period ({ annually, monthly }), and whether it's the popular one; a price of 0 shows "Free" and null shows "Custom". GROUPS holds the sections, each with its features: a feature has a name and a value per plan id, true for a check, false for a dash, or text for a limit such as "Up to 100". Add a plan and TypeScript points at every feature that still needs a value for it.

Each call to action is already a link: point it at your checkout with the plan and the billing period in the address (/checkout?plan=team&billing=annually, from the plan's id and the switch's value), and the Enterprise one at your contact form. Change the href in render={<a href={plan.href} />}; nativeButton={false} tells Base UI the element isn't a button.

Plan names are column headers, feature names are row headers and each group's name heads the rows under it, so a screen reader reads "Team, SAML single sign-on, not included" rather than an empty cell: every check and dash carries hidden text ("Included", "Not included"). The table is named by the section's heading, prices are read with their period ("$10 per user per month") and each call to action says which plan it's for. Both switches are radio groups: the arrow keys move and select.

Below md the plan switch appears over the table, with the popular plan selected, and the table shows the feature column and that one plan. The calls to action and the first rows are on the first screen, and switching plan swaps the column without moving the page. The full table and the one-plan table are both rendered from the same data, and the one not in use is display: none, so assistive technology meets only one. From md all four plans fit and the switch is hidden.

Set popular: true on that plan and false on the others, and give the shown state its id, so a phone starts on it. Its column gets a light grey tint on every cell, the Popular badge and the solid call to action, the block's one primary button; the other plans use the outline style. They're all theme tokens, so the highlight follows your theme and dark mode.

Use a comparison table when you have many differentiating features across three or more plans and buyers need to check them row by row: the grouped rows make collaboration, automation and security differences quick to scan. Plan cards work better for consumer products with short feature lists, where visitors choose on price and a few highlights rather than feature parity.