Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Patch cable

Connect outputs to inputs with cables, like a patch bay: drag from an output's port to an input's port and a cable follows, sagging and swinging with simple rope physics until it settles.

Pro
pnpm dlx shadcn@latest add @caliper/patch-cable

Map Stripe fields

1 of 4 fields mapped

  • customer_email
  • plan_name
  • mrr_cents
  • created_at
  • Contact email
  • Tier
  • Monthly revenue
  • Customer since

Installs components/ui/patch-cable.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

  • Field mapping for imports and integrations.
  • Routing: which channel goes where, which trigger feeds which action.

Skip it when

  • Large graphs; use `FlowDiagram`.
  • Many-to-many mappings where a table of rules is clearer.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Rope, not a curve
Each cable is a short chain of points held to its length and pulled down, so it sways when plugged and comes to rest by itself.
One cable per input
Dropping on an occupied input replaces its cable; clicking a cable unplugs it.

Usage

Keyboard patching
Enter on an output picks up its cable, Enter on an input plugs it in, Escape drops it and Delete on an input unplugs it.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/patch-cable

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { PatchCable } from "@/components/ui/patch-cable"

The worked example comes with Pro

The 38-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

PatchCable

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
label *string—Names the board, e.g. "Field mapping".
sources *PatchPort[]—
targets *PatchPort[]—
valuePatchLink[]—
defaultValuePatchLink[][]
onValueChange((links: PatchLink[]) => void)—

Accessibility

It exposes group semantics, with aria-label, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EnterActivates the focused control.
SpaceActivates the focused control.
EscapeCloses or cancels, then returns focus to where it came from.
DeleteRemoves the next character or the selected item.
BackspaceRemoves the previous character or item.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Surfaces examples