Add this component

npx zentauri-ui add neural-graph

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Data visualization

3D Neural Graph for connected systems

Visualize AI systems, dependencies, and knowledge networks as nodes in three-dimensional space. Connections, clusters, and data-flow pulses make structure and direction easy to explore.

6 nodes · 7 connections

Interactive playground

Drag to orbit, Shift-drag to pan, scroll to zoom, and select a node to trace its connections.

Appearance Data flow Labels

Compound component API

6 nodes · 7 connections

All appearances

Select a card to load that palette into the playground.

default

primary

secondary

success

destructive

warning

info

blue

cyan

emerald

violet

rose

amber

slate

gradient-blue

gradient-emerald

gradient-rose

glass

Neural Graph API

Generated from the package prop types and variant definitions.

NeuralGraph

NeuralGraphProps

Variants

Prop	Type	Default
appearance	`amberbluecyandefaultdestructiveemeraldglassgradient-bluegradient-emeraldgradient-roseinfoprimary`+6	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
animate	`boolean \| undefined`	none
clusters	`readonly NeuralClusterData[] \| undefined`	none
defaultSelectedId	`string \| null \| undefined`	none
edges	`readonly NeuralEdgeData[] \| undefined`	none
interactive	`boolean \| undefined`	none
nodesData form avoids creating thousands of React elements.	`readonly NeuralNodeData[] \| undefined`	none
onNodeHover	`((id: string \| null) => void) \| undefined`	none
onSelectionChange	`((id: string \| null) => void) \| undefined`	none
pixelRatioCanvas pixels are capped at 2× device pixel ratio.	`number \| undefined`	none
selectedId	`string \| null \| undefined`	none
showControls	`boolean \| undefined`	none
showLabels	`boolean \| undefined`	none
showStatus	`boolean \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

NeuralGraphVariant

NeuralGraphVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'slate' \| 'rose' \| 'emerald' \| 'gradient-blue' \| 'violet' \| 'amber' \| 'glass' \| 'success' \| 'warning' \| 'info' \| 'secondary' \| 'destructive' \| 'primary' \| 'gradient-rose' \| 'gradient-emerald' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

ZuiCluster

ZuiClusterProps

Behavior

Prop	Type	Default
label	`string \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
id*	`string`	none

ZuiEdge

ZuiEdgeProps

Behavior

Prop	Type	Default
animated	`boolean \| undefined`	none
from*	`string`	none
to*	`string`	none

ZuiNode

ZuiNodeProps

Behavior

Prop	Type	Default
cluster	`string \| undefined`	none
label	`string \| undefined`	none
position*	`NeuralPosition`	none
radius	`number \| undefined`	none

Inherited HTML props

Prop	Type	Default
id*	`string`	none

CSS variable overrides

Neural Graph CSS variables

Theme the canvas surface, nodes, edges, highlights, and cluster regions.

48 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-neural-graph-bg: #f8fafc;
  --zui-neural-graph-border: #cbd5e1;
  --zui-neural-graph-label: #334155;
  --zui-neural-graph-edge: #94a3b8;
  --zui-neural-graph-active: #f59e0b;
  --zui-neural-graph-cluster: #6366f1;
  --zui-neural-graph-default-node: #6366f1;
  --zui-neural-graph-primary-node: #2563eb;
  --zui-neural-graph-secondary-node: #64748b;
  --zui-neural-graph-success-node: #16a34a;
  --zui-neural-graph-destructive-node: #dc2626;
  --zui-neural-graph-warning-node: #d97706;
  --zui-neural-graph-info-node: #0284c7;
  --zui-neural-graph-blue-node: #2563eb;
  --zui-neural-graph-cyan-node: #0891b2;
  --zui-neural-graph-emerald-node: #059669;
  --zui-neural-graph-violet-node: #7c3aed;
  --zui-neural-graph-rose-node: #e11d48;
  --zui-neural-graph-amber-node: #d97706;
  --zui-neural-graph-slate-node: #475569;
  --zui-neural-graph-gradient-blue-node: #3b82f6;
  --zui-neural-graph-gradient-emerald-node: #10b981;
  --zui-neural-graph-gradient-rose-node: #f43f5e;
  --zui-neural-graph-glass-node: #64748b;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-neural-graph-bg-dark: #020617;
  --zui-neural-graph-border-dark: #334155;
  /* ...same variables with -dark at the end */
}

What it does

Neural Graph renders nodes and connections on a canvas using perspective projection of x, y, and z coordinates. Nodes have spherical shading and depth ordering.

Camera and selection

Drag to orbit, Shift-drag to pan, and scroll or use the toolbar to zoom. Hover and selection highlight connected edges; selection supports controlled and uncontrolled state.

Data and clustering

Use ZuiNode, ZuiEdge, and ZuiCluster as declarative children or pass nodes, edges, and clusters arrays for larger data sets. Edges with unknown endpoints are ignored.

Common use cases

AI model and pipeline visualization.
Architecture and dependency maps.
Network topology and infrastructure views.
Knowledge graphs and relationship exploration.

Accessibility and motion

The graph has a keyboard-focusable region and a live selection status. Arrow keys step through nodes. Animated edge pulses respect reduced-motion preferences.

FAQ

Does Neural Graph need a 3D runtime?

No. It projects 3D node coordinates onto a canvas, so orbit, pan, and zoom work without an extra peer dependency.

How can I supply a large graph?

Pass nodes, edges, and clusters as arrays to avoid creating thousands of React child elements. Canvas drawing keeps the DOM small; performance depends on graph density and device hardware.

Can users navigate without a pointer?

Yes. Focus the graph, use arrow keys to select nodes, plus or minus to zoom, and Escape to clear selection. Reduced-motion preferences disable data-flow animation.