About
A visual signal-routing control that draws connections as hanging cables between source and destination jacks, refusing incompatible plugs and fully operable from the keyboard.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Patch Bay to your project and fits it to your theme.
Code
How Patch Bay is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { PatchBay, type Input, type Jack } from "@/components/ui/patch-bay";
const OUTPUTS: Jack[] = [
{ id: "form", name: "Signup form", type: "JSON" },
{ id: "cam", name: "Studio camera", type: "video" },
{ id: "mic", name: "Desk mic", type: "audio" },
{ id: "sensor", name: "Humidity sensor", type: "number" },
{ id: "docs", name: "Docs export", type: "text" },
];
const INPUTS: Input[] = [
{ id: "hook", name: "Webhook", accepts: ["JSON"] },
{ id: "rec", name: "Recorder", accepts: ["video", "audio"] },
{ id: "chart", name: "Dashboard chart", accepts: ["number"] },
{ id: "index", name: "Search index", accepts: ["text", "JSON"] },
{ id: "spk", name: "Speakers", accepts: ["audio"] },
];
export default function PatchBayDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6 text-foreground">
<div className="w-full max-w-[46rem]">
<PatchBay
title="Masar studio routing"
outputs={OUTPUTS}
inputs={INPUTS}
defaultCables={[
{ from: "form", to: "hook" },
{ from: "cam", to: "rec" },
{ from: "sensor", to: "chart" },
]}
theme="light"
/>
</div>
</div>
);
}
More by ham7a311
View all
Wave Mesh
79
Route Globe
78
Glass Tiles
64
Glyph Swell
27
Orbit Ring Stats
26
Ask Bar
21
Wind Map
18
Streak Field Stats
17