DocsCircuit 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

Dependencies: framer-motion clsx tailwind-merge lucide-react

Usage

API Reference

PropTypeDefault
nodesCircuitNode[]

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

—
connectionsCircuitConnection[]

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

—
widthnumber

Width of the circuit board canvas

600
heightnumber

Height of the circuit board canvas

400
showGridboolean

Show dot grid background

true
pulseSpeednumber

Speed of the electricity animation in seconds

2
traceWidthnumber

Width of the connection traces in pixels

2
classNamestring

Additional CSS classes for the container

—

Working with this component

Describe the graph

Give each node a unique id and x/y coordinates. Connections refer to those ids with from and to. Keep node labels concise and make sure each connection points to an existing node.

Fit the diagram

width and height define the diagram dimensions. Plan node positions within those bounds, then test the diagram at the width where it will actually appear.

Explain the meaning

Use labels or accompanying text to explain a workflow. Animated pulses and color alone should not be the only way a reader understands a connection or status.

Keep in mind

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

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousCase Study Flip StackNextCollection Surfer
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}
/>