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

PropertyTypeDefault
nodes

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

CircuitNode[]—
connections

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

CircuitConnection[]—
width

Width of the circuit board canvas

number600
height

Height of the circuit board canvas

number400
showGrid

Show dot grid background

booleantrue
pulseSpeed

Speed of the electricity animation in seconds

number2
traceWidth

Width of the connection traces in pixels

number2
className

Additional CSS classes for the container

string—

View source

Click the icon in the preview panel to browse source for each variant.

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