# API Integrations block

> API integrations settings data grid with copyable keys, status switches, and pause-all toggle

Sortable, paginated table of connected API integrations: brand logos, copy-to-clipboard API key badges, daily call counts, per-row enable switches, and a pause-all toggle. ReUI DataGrid, Frame, Badge; shadcn Switch. Connected apps, API keys settings.

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

## Best for

Row checkboxes, hideable columns and copyable API keys over 32 integrations at 10 a page, with a Pause all switch for every row

## Agent notes

- `API_INTEGRATIONS` ships 32 sample rows with fake `apiKey` values, and `ApiKeyCell` shows each in full, also in the copy toast
- `handleToggle` and `handlePauseAllChange` only update the local `rows` state, so persist per-row and bulk pause changes on the server
- The header Positions `Button` and the row `ActionsCell` edit button only fire a `toast`, so wire them to real routes

## When not to use

- Keys that stay masked until revealed, with rotate and revoke actions per row: use [API Keys Manager](https://web.dev.reui.io/blocks/application/form/form-8.md) (`get_block("form-8")`)
- Large record sets paged, filtered and sorted on the server: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

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