Patchbay Integrations

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<PatchbayIntegrations />

Installation

Usage

import * as React from "react";
import {
  PatchbayIntegrations,
  type PatchbayConnection,
} from "@/components/ui/patchbay-integrations";

const outputs = [
  { id: "events", label: "Event stream" },
  { id: "webhook", label: "Webhook" },
];

const integrations = [
  { id: "slack", label: "Slack", accent: "#4a154b" },
  { id: "github", label: "GitHub" },
  { id: "email", label: "Email" },
];

export function Example() {
  const [connections, setConnections] = React.useState<PatchbayConnection[]>([
    { from: "events", to: "slack" },
  ]);

  return (
    <PatchbayIntegrations
      outputs={outputs}
      integrations={integrations}
      connections={connections}
      onConnectionsChange={setConnections}
    />
  );
}

For uncontrolled usage, just pass defaultConnections instead and the component manages the connection state itself:

<PatchbayIntegrations
  outputs={outputs}
  integrations={integrations}
  defaultConnections={[{ from: "events", to: "slack" }]}
/>

Props

Types

interface PatchbayOutput {
  id: string;
  label: string;
  icon?: React.ReactNode;
}

interface PatchbayIntegration {
  id: string;
  label: string;
  icon?: React.ReactNode;
  accent?: string; // Brand accent color (HEX/RGB), applied to the cable and indicator light
}

interface PatchbayConnection {
  from: string; // output jack id
  to: string; // integration jack id
}

How it works

• Cables are drawn as cubic béziers with control points pulled downward, imitating a patch cable slackened by gravity; cableSag adjusts how slack it looks.
• Endpoint anchors are measured live from the center of each jack circle (ResizeObserver + window resize), so the cables re-land correctly whenever the container resizes or reflows.
• One output jack can feed several integrations at once, and one integration can accept several output jacks; dragging or clicking the same pair again unpatches it.
• Once patched, the matching integration's indicator light comes on; hovering, selecting, or dragging an output jack makes the indicator lights of its connected jacks pulse for emphasis.
• When accent is not provided, the cable and indicator light use a neutral color; when it is, that brand color is applied.

Accessibility

• Output jacks and integration jacks are both native buttons and can be operated with the keyboard: first select an output jack with Enter / Space (aria-pressed), then press an integration jack to create or remove the connection.
• While an output jack is selected, each integration jack's aria-pressed reflects whether it is already connected to it, and the aria-label says "press to connect / press to disconnect".
• Dragging uses pointer events with a hit radius, and on touch touch-none keeps page scrolling from interfering.
• The SVG cable layer is aria-hidden and pointer-events-none, so it does not interfere with clicking or announcing the buttons underneath.
• When the user has "reduce motion" enabled at the system level, the cable draw-in and the indicator pulse are disabled, and connections and lit states are shown directly.