build69
build69  /  Components  /  Work & Boards  /  IntegrationCard

IntegrationCard

v1.0.19Updated 20 Oct 2026

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

View source← Back to catalog

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
  • Loading skeleton is an announced status region: role=status + aria-busy + labels.loading as its accessible name, with data-state=loading as a theme/e2e hook
  • i18n (FB-18): labels prop overrides every built-in string; LocaleProvider localizes the last-sync relative time and synced-item counts
  • Pass-through props (data-* and the rest) land on the root of EVERY branch — the populated tile and the loading skeleton — so an id an e2e or audit tool reads never disappears while the component is busy or has nothing to show. They are spread first, so they cannot overwrite the wiring the component sets itself (data-slot, the state roles, className, style, ref)
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'—
loading

Render the loading skeleton instead of the tile. The skeleton is an announced status region (role=status, aria-busy, named by labels.loading) and keeps every pass-through prop

boolean—
labels

Override any built-in UI string (i18n), including labels.loading which names the loading skeleton for assistive tech; merged over English defaults exported as DEFAULT_INTEGRATION_CARD_LABELS

Partial<IntegrationCardLabels>—
...props

Every remaining standard div attribute (data-* hooks, id, style, title, aria-*, handlers) is spread onto the card root in BOTH branches — populated and loading skeleton. The spread goes FIRST, so data-slot and data-status can never be clobbered (fb_5c6ffd6a)

React.HTMLAttributes<HTMLDivElement>—

Related

Platform docsAll componentsSource files