Circuit Board

An interactive circuit board layout component with animated electricity paths that pulse between connected nodes. Perfect for visualizing data flows, system architectures, and network topologies.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/circuit-board.json"

Examples

Simple Flow

Cloud

Server

Validate

Database

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

<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}
/>

Load Balancer

User

Load Balancer

API 1

API 2

Database

import { CircuitBoard } from "@/components/ui/circuit-board"
import { Globe, GitBranch, Server, Database } from "lucide-react"

<CircuitBoard
  nodes={[
    { id: "user", x: 60, y: 150, label: "User", icon: <Globe className="w-4 h-4" /> },
    { id: "lb", x: 180, y: 150, label: "Load Balancer", icon: <GitBranch className="w-4 h-4" /> },
    { id: "api1", x: 300, y: 80, label: "API 1", icon: <Server className="w-4 h-4" /> },
    { id: "api2", x: 300, y: 220, label: "API 2", icon: <Server className="w-4 h-4" /> },
    { id: "db", x: 420, y: 150, label: "Database", icon: <Database className="w-4 h-4" /> },
  ]}
  connections={[
    { from: "user", to: "lb", animated: true },
    { from: "lb", to: "api1", animated: true },
    { from: "lb", to: "api2", animated: true },
    { from: "api1", to: "db", animated: true },
    { from: "api2", to: "db", animated: true },
  ]}
  width={480}
  height={300}
/>

Bidirectional

CPU

RAM

Storage

import { CircuitBoard } from "@/components/ui/circuit-board"
import { Cpu, HardDrive, Database } from "lucide-react"

<CircuitBoard
  nodes={[
    { id: "cpu", x: 100, y: 100, label: "CPU", icon: <Cpu className="w-4 h-4" /> },
    { id: "ram", x: 250, y: 100, label: "RAM", icon: <HardDrive className="w-4 h-4" /> },
    { id: "storage", x: 400, y: 100, label: "Storage", icon: <Database className="w-4 h-4" /> },
  ]}
  connections={[
    { from: "cpu", to: "ram", bidirectional: true },
    { from: "ram", to: "storage", bidirectional: true },
  ]}
  width={500}
  height={200}
  showGrid={false}
/>

Network Topology

Router

Server 1

Server 2

Server 3

import { CircuitBoard } from "@/components/ui/circuit-board"
import { Wifi, Server, Globe } from "lucide-react"

<CircuitBoard
  nodes={[
    { id: "router", x: 240, y: 100, label: "Router", icon: <Wifi className="w-4 h-4" /> },
    { id: "server1", x: 100, y: 220, label: "Server 1", icon: <Server className="w-4 h-4" /> },
    { id: "server2", x: 240, y: 220, label: "Server 2", icon: <Server className="w-4 h-4" /> },
    { id: "server3", x: 380, y: 220, label: "Server 3", icon: <Server className="w-4 h-4" /> },
  ]}
  connections={[
    { from: "router", to: "server1", animated: true },
    { from: "router", to: "server2", animated: true },
    { from: "router", to: "server3", animated: true },
  ]}
  width={480}
  height={300}
  pulseSpeed={1.5}
/>

Props

nodes

Array of node objects with id, x, y, label, size, and icon

connections

Array of connection objects with from, to, animated, bidirectional

width / height

Dimensions of the circuit board (default: 600 x 400)

showGrid

Show dot grid background (default: true)

pulseSpeed

Speed of the electricity animation in seconds (default: 2)

traceWidth

Width of the connection traces in pixels (default: 2)