# Integrations Gallery block

> Integrations settings gallery, app cards in a grid with connect button and toggle switch

Integrations settings page: responsive grid of app cards with brand logo, description, connect/disconnect button and a toggle switch. Connected apps marketplace, integration directory. ReUI Frame with shadcn Item, Button, Switch.

- Type: Pro block
- Category: [Settings](https://web.dev.reui.io/blocks/application/settings.md)
- Page: https://web.dev.reui.io/blocks/application/settings/settings-13
- MCP: `get_block("settings-13")`
- Built with: Button, Frame, Item, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 3 column grid of 9 logo tiles whose footer pairs a Connect button with a Switch bound to the same connected state

## Agent notes

- `IntegrationCard` keeps `connected` in `useState` seeded from `integrationApps`; the Connect button and Switch only flip it, with no OAuth or API call
- The external link icon `Button` in each card header has no `onClick` and no aria-label, so link it to the app page and name it
- `IntegrationApp` carries `id`, `description`, `logo` and `connected` but no name, so add a title field if the cards must name the app

## When not to use

- App rows that show a status badge beside the name and a Configure or Install button: use [Connected Apps](https://web.dev.reui.io/blocks/application/settings/settings-16.md) (`get_block("settings-16")`)
- A plain directory of apps with one Connect button per row: use [Integrations Directory](https://web.dev.reui.io/blocks/application/list/list-8.md) (`get_block("list-8")`)

## Install

```bash
npx shadcn@latest add @reui/settings-13
```

## About Settings blocks

### When to use

- Preference pages of labeled rows, each row carrying its own switch, select, input or button
- Integration pages that pick, connect or configure third party apps, webhook routes and API keys
- Account, security, notification channel and role permission policies

### When not to use

- A new record to fill in and submit, such as an invoice, a product or a member invite: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- A billing page with usage counters and an invoice table, or a referral rewards page: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- The sidebar navigation that wraps every page of a product, the settings page included: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)

### Agent notes

- Each page.tsx centers the root in a padded `min-h-svh` wrapper and each root caps its own max width; remove both inside your settings route
- Nothing is saved and no block calls an API, so wire every button and control, including any `useState` or `defaultChecked` value, to your settings API

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.