Circuit Board

Heroes 156

About

An interactive circuit board layout with labeled nodes and animated electricity pulses that travel along right-angle traces between connected nodes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Circuit Board to your project and fits it to your theme.

Code

How Circuit Board is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CircuitBoard } from "@/components/ui/circuit-board";
import { Cloud, Server, Shield, Database } from "lucide-react";

export default function CircuitBoardDemo() {
  return (
    <div className="flex min-h-[360px] w-full items-center justify-center bg-background p-6">
      <CircuitBoard
        nodes={[
          {
            id: "start",
            x: 80,
            y: 150,
            label: "Cloud",
            icon: <Cloud className="w-4 h-4" />,
          },
          {
            id: "process",
            x: 250,
            y: 80,
            label: "Server",
            icon: <Server className="w-4 h-4" />,
          },
          {
            id: "validate",
            x: 250,
            y: 220,
            label: "Validate",
            icon: <Shield className="w-4 h-4" />,
          },
          {
            id: "end",
            x: 420,
            y: 150,
            label: "Database",
            icon: <Database className="w-4 h-4" />,
          },
        ]}
        connections={[
          { from: "start", to: "process", animated: true },
          { from: "start", to: "validate", animated: true },
          { from: "process", to: "end", animated: true },
          { from: "validate", to: "end", animated: true },
        ]}
        width={500}
        height={300}
      />
    </div>
  );
}