React Node Graph / Block Diagram
A block diagram of draggable nodes joined by SVG bezier wires — for SoC dataflow, pipelines, and signal chains. Drag a block and its connections follow; each node carries an accent rail, a label, and a subtitle.
RISC-VRV32IMC core
AXI Xbar4×4 crossbar
SRAM64 KB
AES-256crypto core
UARTAXI4-Lite
Drag any block to rearrange.
Installation
npx shadcn@latest add "https://kelvinui.com/registry/node-graph.json"
Props
| Prop | Type | Description |
|---|---|---|
| nodes | GraphNode[] | { id, label, sub?, x, y, accent? } |
| edges | GraphEdge[] | { from, to, label? } connecting node ids |
| height | number | Canvas height in px (default 360) |
Nodes are positioned by their initial x / y and become draggable; wires connect each source's right edge to its target's left edge.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.