Integrations - Grid

These blocks are for the public side of your integrations: a page that shows which tools work with your product. They take typed props with a list of tools, and the logos come from the Iconify logos set, so you can swap them for your own images.

Search, tabs, connect buttons and votes only change local state. The connect and disconnect buttons are for show, so replace them with your OAuth flow. If you want the settings screen where a signed in user manages their integrations, see the integrations block in the settings blocks.

Style One

Logo grid with a hover lift that respects reduced motion and a link to all integrations.

Style Two

Searchable directory with category chips that show counts, cards with a short description and an empty state.

Style Three

Featured integration with a large card and a call to action, a popular row and a grid of more integrations with a new badge.

Style Four

Connected and available cards with tabs and counts, a connect button with a loading state and a disconnect confirmation.

Style Five

Logo cloud next to a headline, a short paragraph and a list of reasons. The logos fade in one after another unless reduced motion is on.

Style Six

Request form for a missing integration with validation, and a most requested list where people can vote.