Banner Live Integration Sync

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner37.tsx instead.

Usage

The file also exports banner37Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner37, banner37Demo } from "@/components/blocks/banner/banner37";

export default function Page() {
  return <Banner37 {...banner37Demo} />;
}

Props

Types

type Integration = {
  name: string;
  status: "synced" | "syncing" | "error";
};

Behavior notes

• Each integration renders as a bordered, rounded-full chip with its own dot, distinct from the Live API Health block's bare dot-plus-text list, so the two blocks don't visually collide despite both listing named items.
• The roster is capped at maxVisible (4 by default); anything past that collapses into a plain "+N more" label instead of growing the row indefinitely.
• The pulsing lead dot next to the connected-count title always reads as the aggregate "live" signal, separate from each integration chip's own status dot.

Frequently asked questions