# Integrations grid (goodtabs UI)

A grid of integration tiles, each with a letter mark, a name and one line.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/integrations-grid.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/integrations-grid`

## Usage

```tsx
import { IntegrationsGrid } from "@/components/integrations-grid"

<IntegrationsGrid title="Connect your stack" items={[{ name: "Plotline", description: "Sync events to your analytics." }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The section heading. |
| description | `ReactNode` |  | One or two sentences under the title. |
| items | `{ name: string; description: string; href?: string }[]` |  | The tiles. href turns a tile into a link. |
| columns | `2 | 3 | 4` | `3` | Columns from the sm breakpoint up. |
| size | `"sm" | "default"` | `"default"` | Spacing scale. sm fits a card. |

## When to use

- A page that lists the tools your product connects to
- When names and one line each are the whole message

## When not to use

- For a searchable directory of many apps
- When you need real brand logos; this uses a monogram on purpose

## Notes for agents

- Server component with no state
- The mark is the first letter of the name, so no third party logo ships by accident
- All tool names in the demos are made up

Docs: https://ui.goodtabs.co/components/integrations-grid