Centered Compatibility Matrix Hero Block for React

Edit the two arrays at the top of the file. CAPABILITIES is the table's columns, each an id and the header's label. PLATFORMS is its rows, each a name and a support record with true or false for every capability id. Add an id to CapabilityId when you add a column, and TypeScript points out every platform that doesn't say yet whether it supports it. Update the footnote under the frame to match.

The table is named Capabilities supported on each platform. The capabilities are its column headers and each platform's name is its row's header, so moving through a row reads, say, Windows, Biometric auth, Not supported. The check and the dash are hidden from assistive technology; each cell says Supported or Not supported in text instead, so the answer never rests on color or an icon alone.

Load the support data from your release API or CMS where the page is built, shape it like PLATFORMS, and pass it to the block in place of the constant. The table has no state of its own, so it renders the same on the server and in the browser, and stays fast however many rows you add.

Install the SDK and Read the docs are links to #: point them at your install guide and your documentation. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

Its five columns share the frame's width down to 320 px without scrolling sideways. The capability headers wrap onto two lines when they need to and step down a size below sm, and the cells' padding tightens. The headline steps down to text-4xl, the pill shortens its message with an ellipsis, and the outline button wraps under the Shine Button when the row runs out of room.

Use the matrix when which features each platform supports matters to your buyers, as it does for native SDKs and enterprise tools. Use a row of tech icons when showing how many platforms you cover is enough, and you want a lighter touch under the headline.