build69
build69  /  Components  /  Work & Boards  /  IntegrationCard

IntegrationCard

v1.0.10Updated 27 Aug 2026

Tile representing a third-party integration (connect / configure / disconnect actions). Used in settings > integrations grids.

Preview

Live · 11 stories
DefaultOpen ↗
Why this is recommendedintegrationcardsettingsconnect+1

The default, out-of-the-box IntegrationCard.

Recommended for+14
  • Settings → integrations gallery
  • Marketplace tiles
Tags+6
integrationcardsettingsconnectdefault
Features+4
  • Logo + name + description
  • Connection status badge
  • Connect / configure button
  • Tag chips
  • i18n (FB-18): labels prop overrides every built-in string; LocaleProvider localizes the last-sync relative time and synced-item counts
Not recommended for−2
  • Inline list rows (use a Table row)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "IntegrationCard" })

Usage

import { IntegrationCard } from '@/components/patterns/integration-card';

<IntegrationCard name="Stripe" description="Accept card payments." status="available" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
name

Integration name

stringyes
description

Short description

string
status

Connection status

'connected' | 'available' | 'error'
labels

Override any built-in UI string (i18n); merged over English defaults

Partial<IntegrationCardLabels>

Related