# Connected Apps block

> Connected apps integration settings with per-row status badges and connect actions

Connected apps panel listing integrations as rows with logo, name, status badge (Connected, Available, Preview), and Configure or Install action. Uses ReUI Frame, Badge, shadcn Item, Button. For integrations, connectors, app directory.

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

## Best for

A flat list of 7 apps tagged Connected, Available or Preview, each with a Configure or Install button, under a Build Connector action

## Agent notes

- The Build Connector `Button` and each row `Button` in `IntegrationRow` have no click handler, so wire connect, configure and install
- The badge comes from `status` through `INTEGRATION_STATUS_META` while the button text is a separate `actionLabel`, so keep both in sync
- `ThemeLogo` swaps light and dark SVGs for Cursor and Resend, so a single color logo you add needs both variants

## When not to use

- Integrations grouped under labeled sections with a per-row status dot and actions menu: use [App Connections](https://web.dev.reui.io/blocks/application/settings/settings-4.md) (`get_block("settings-4")`)
- Each app needs its own event channel switches once it is connected: use [Integration Events](https://web.dev.reui.io/blocks/application/settings/settings-6.md) (`get_block("settings-6")`)

## Install

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

## 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.