# Integrations Directory block

> Integrations directory list with brand logos and per-row Connect buttons

Integrations directory card listing apps with brand logos, name, description, and a per-row Connect button, plus a See All footer link. ReUI Frame with shadcn Button and Separator. App marketplace, connected accounts, settings.

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

## Best for

Third party app logos with a short purpose line and a Connect button on each row, over a See All footer

## Agent notes

- Replace `INTEGRATION_ITEMS` in data.tsx; `id` keys each row and `logo` takes any node, as `ClerkLogoCombo` does to swap a light and a dark mark
- Connect in each `IntegrationRow` has no click handler and no connected state; add both when you wire your OAuth or install flow
- The See All Integrations `Button` has no click handler; link it to your integrations page

## When not to use

- Built in capability modules added with a plus button, with no third party logos: use [Capability Modules](https://web.dev.reui.io/blocks/application/list/list-9.md) (`get_block("list-9")`)
- Apps that already carry a Connected or Available status with Configure or Install: use [Connected Apps](https://web.dev.reui.io/blocks/application/settings/settings-16.md) (`get_block("settings-16")`)

## Install

```bash
npx shadcn@latest add @reui/list-8
```

## About List blocks

### When to use

- A dashboard side panel of KPIs, funds, coins, investments or movers with a figure on every row
- A short wallet or crypto transaction history with a signed credit or debit amount on each row
- An integrations directory or picker with a connect or add button on every row

### When not to use

- Records or metrics laid out as separate tiles in a grid, one tile per record: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A single row layout of media, title and actions to compose a list of your own: use [Item](https://web.dev.reui.io/components/item.md) (`get_component("item")`)
- Headline metrics that each need an actions menu, a progress bar or a segmented gauge: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)

### Agent notes

- Each page.tsx centers the block in a padded `min-h-svh` wrapper; drop it when the list goes into your own dashboard layout
- Every root component takes no props and renders constants from its `data` module; add props to pass in your own rows
- Every `FramePanel` pins its padding with an important utility, so changing the Frame `spacing` prop leaves those insets as they are

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.