Integrations galleryPro

• Search and categories
• Connected filter
• Connect in place
• Empty state

• App marketplaces and integration settings.

• One or two integrations: put them in settings.

Import it from @/components/blocks/integrations-gallery after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { IntegrationsGallery } from "@/components/blocks/integrations-gallery";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <IntegrationsGallery />
    </main>
  );
}

• Connect buttons name the integration and use aria-pressed.

• Cards re-flow with layout animation when filtering; buttons show a spinner then the result.

• 1, 2 or 3 columns; categories scroll horizontally on phones.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• The sample brands are fictional; use your partners' real names and logos with permission.