Integration Logo Mark Grid Features Block for React

Edit INTEGRATIONS at the top of the file: each has a name, a letter and a corner radius for its mark, whether it is filled, its category, a sentence and the three facts a category card shows. START lists the ones that begin connected. The count and the tabs follow the list; a new category needs one more entry in CATEGORIES, and keeps four or a multiple of two tiles so rows fill.

Yes: replace Monogram with your own mark. The block draws abstract monograms on purpose, so the preview never shows someone else's brand and every tile reads in any theme.

Yes. The connected list lives in the block, above the tabs, so a tile you switch on in All is still on in its category. The Switch only holds that state: wire toggle to your own connect flow.

A hidden copy of the full grid sits in the same cell as the open panel, so the block keeps the height of the tallest tab. A category's four tiles stretch to fill it as taller cards instead of leaving a gap.

Tab moves to the tab list, and the arrow keys move between tabs; the open panel's switches follow in Tab order, each named "Connect" and the integration. The count is a polite live region, so toggling a switch announces the new total. Base UI selects a tab on focus here, as on the other bases.

The tabs share the row four across, and the tiles are two across with each tile's mark and switch on one row and the name under it. All is six rows tall; a category is two rows of taller cards.