shadcn.io is not affiliated with official shadcn/ui
Centered Compatibility Matrix Hero Block for React Aria
A showcase centered hero for an SDK: a release pill, a two-line headline, a Shine Button and an outline button, then a platform by capability table in a hairline frame.
Installation
Overview
A centered hero with a platform compatibility matrix below the text. An announcement pill links to the latest release, then a headline with a muted second line, a sentence, a Shine Button as the one primary action and an outline button. Below them, a table maps six platforms against four capabilities inside a hairline frame with + marks on its corners: a filled check in the foreground color where a platform supports a capability, an outlined dash where it doesn't, and a footnote under the frame. It's built from Guides, Announcement, Status, Shine Button, Button and Table, with Lucide icons, Tailwind CSS and a CSS entrance. The fictional product is the Tessera SDK. For cross-platform developer tools, native SDK landing pages and products where the breadth of platform support is the main selling point.
FAQ
How do I change the platforms and capabilities?
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.
How does a screen reader read the matrix?
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. On React Aria, the table is a grid: it's one stop in the tab order, and the arrow keys move from cell to cell, with a ring on the cell they land on.
How do I fill the matrix from my release data?
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.
Where do the buttons link to?
Install the SDK and Read the docs are links to #: point them at your install guide and your documentation.
On React Aria, each button takes the link's href and renders an a.
How does the matrix fit on a phone?
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.
When should I use a compatibility matrix instead of a row of tech icons?
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.