Matching Pairs

Overview

Displays sources and targets in two columns. Users click a source then a target to create a connection. Connected pairs are highlighted with chart colors. Clicking a connected item removes its connection.

Usage

import { MatchingPairs } from "@leanicon/web-builder-library";

const [connections, setConnections] = React.useState([]);

<MatchingPairs
  sources={[
    { id: "a", label: "React" },
    { id: "b", label: "Vue" },
  ]}
  targets={[
    { id: "1", label: "Meta" },
    { id: "2", label: "Evan You" },
  ]}
  connections={connections}
  onConnectionsChange={setConnections}
/>;

Notes

• Each source and target can participate in at most one connection at a time.
• Connection colors cycle through CSS chart variables (--color-chart-1 through --color-chart-5).
• Keyboard-accessible: press Enter or Space to select/connect items.
• Dark mode is handled via semantic tokens.