# Integration card (goodtabs UI)

A service with its logo, a one-line description and a switch that connects it.

## Install

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

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

## Usage

```tsx
import { IntegrationCard } from "@/components/ui/integration-card"

<IntegrationCard
  name="GitHub"
  description="Link pull requests to listings."
  icon={<GitHubIcon />}
  connected={connected}
  onConnectedChange={setConnected}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` |  | The service's name. Also names the switch: Connect {name}. |
| description | `string` |  | One line on what connecting does. |
| icon | `ReactNode` |  | The logo in currentColor. Initials show when it is missing. |
| connected | `boolean` |  | Controlled state. |
| defaultConnected | `boolean` | `false` | Starting state when uncontrolled. |
| onConnectedChange | `(connected: boolean) => void` |  | Called with the next state when the switch flips. |
| disabled | `boolean` | `false` | Locks the switch and fades the card. |

## When to use

- Integrations and connected apps pages in settings
- Onboarding steps that ask people to link a few services
- Any list of on and off services with a logo each

## When not to use

- Settings that are not a connection, use a switch field
- Connections that need a flow (OAuth, a form): open it from onConnectedChange and keep the card controlled
- Showing a status without letting people change it

## Notes for agents

- Client component; a demo or page that passes onConnectedChange must be a client component too
- Uncontrolled by default with defaultConnected; pass connected to control it, and flip it back in onConnectedChange if the connection fails
- The icon slot is size-10 bg-muted and sizes any svg to 20px; pass marks in currentColor so they stay monochrome
- Put several in a CSS grid, the card has no fixed width

Docs: https://ui.goodtabs.co/components/integration-card