Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Integration Logo Mark Grid Features Block for Solid

A tabbed integration directory for an integration hub: twelve tiles with abstract monograms, each with a connect switch, three category tabs and a live count of what is connected.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration directory for Solid with Ark UI. A left-aligned header says "Plug in the tools you already run", with a live count ("4 of 12 connected") and four tabs: All and three categories. Under it, a band runs from rail to rail with twelve tiles in shared hairlines, four across and two on a phone. Each tile is an abstract monogram drawn in SVG (a letter in a rounded shape, never a real logo), a name, a category, a sentence and a Switch that connects it. All shows the twelve compact tiles; a category shows its four as taller cards that add what they sync, their direction and setup time. It's built from Tabs, Switch, Status and Guides, with CSS transitions for the entrance and your theme's tokens. For integration hubs, data tools and any product with a directory to browse.

FAQ

How do I change the integrations?

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.

Can I use real logos?

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.

Does the connect state survive switching tabs?

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.

Why doesn't the page jump when I change tab?

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.

How do the tabs and switches work by keyboard?

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.

How does it fit on a phone?

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.

All 170 features blocks