# Integrations gallery

> Searchable integrations with categories and connect / disconnect in place.

Block · Pro · https://lodeui.com/blocks/integrations-gallery

## When to use

- App marketplaces and integration settings.

## When not to use

- One or two integrations: put them in settings.

## Installation

```bash
npx shadcn@latest add @lode/integrations-gallery
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { IntegrationsGallery } from "@/components/blocks/integrations-gallery";

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

## API reference

### IntegrationsGallery

A searchable integrations directory with categories, a connected filter and connect / disconnect that resolve in place. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, categories and cards |
| Enter / Space | Connect or disconnect |

## Accessibility

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

## Motion

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

## Responsive behavior

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

## Performance

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

## Notes for AI

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

## Related

- [Animated beam](https://lodeui.com/components/animated-beam) — A glowing pulse travelling along a curved line between two elements.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.
- [Webhook logs](https://lodeui.com/blocks/webhook-logs) — Webhook deliveries with payload and response inspection, failure filter and retry.