Docs/Circuit Board

Circuit Board

Animated circuit board visualization with nodes and connections. Perfect for tech diagrams and flow visualizations.

Installation

$pnpm dlx shadcn@latest add @componentry/circuit-board

Usage

API Reference

PropTypeDefault
nodesArray of node objects with id, x, y, label, size, and icon
CircuitNode[]—
connectionsArray of connection objects with from, to, animated, bidirectional
CircuitConnection[]—
widthWidth of the circuit board canvas
number600
heightHeight of the circuit board canvas
number400
showGridShow dot grid background
booleantrue
pulseSpeedSpeed of the electricity animation in seconds
number2
traceWidthWidth of the connection traces in pixels
number2
classNameAdditional CSS classes for the container
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
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}
/>