User Graph

An interactive multi-tiered User & AI Agent Hierarchy Network Graph built for Next.js and React. It features an interactive orbiting tool cluster around the main user node, SVG connecting curves, specialized sub-agent team nodes, app integration badges, and full light mode design.

Three tiers stack top to bottom: an orbit of channel nodes around the user, the orchestrator, and the specialist sub-agents with their app badges. Below 640px the SVG hierarchy swaps itself for a vertical timeline — the component measures its own container, so it adapts inside the preview, not just at the window edge.

User graph

Click any orbit node to move the highlight and its label tooltip.

className: sizes the square container the orbits are laid out inside.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install User Graph

npx shadcn@latest add @algorize-ui/user-graph

components/custom/blocks/UserGraphBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding User Graph to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

icons is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/icons

Features

Discover the key capabilities of the User Graph hierarchy tree:

Orbit Tool Cluster

Interactive orbiting ring featuring 10 integrated channels including Voice, Telegram, Email, and MCP plugins.

Dynamic SVG Curves

Cubic bezier SVG connecting paths with glowing animated pulses highlighting selected agent hierarchy paths.

Specialized Sub-Agents

Dedicated team nodes for Sales, Marketing, Support, Accounting, and Data Analytics with online status badges.

Light Mode First

Crafted with high-contrast slate and white light theme aesthetics, full dark mode support, and smooth responsiveness.

Best Practices & Guidelines

Hierarchy Organization

Ensure nodes are grouped logically into User, Orchestrator, and Sub-Agent tiers so the hierarchy flows naturally from top to bottom.

Props Reference

Prop	Type	Default	Description
color	string	"primary"	Accent for the avatar ring, the selected orbit node and the ambient glow. Takes `"indigo"`, `"rose"`, `"emerald"`, `"zinc"`, any hex string, or `"primary"` to follow your theme.
defaultSelectedTool	string	"phone"	The `id` of the orbit node highlighted on first render. Clicking another node takes over from there.
orbitTools	OrbitTool[]	11 sample channels	The ring of channel nodes. Each is `{ id, name, icon }`, where `icon` is any React component. They are spaced evenly, so the ring re-balances for any array length.
subAgents	SubAgent[]	5 sample agents	The bottom tier. Each entry carries `title`, `role`, `avatarUrl`, `status`, its `apps` badges, and two positions: `percentX` for the card and `svgX` for the connector curve in the 1000-wide viewBox.
orchestrator	{ name, role, avatarUrl }	sample lead	The middle-tier node linking the orbit to the sub-agents.
className	string	undefined	Merged onto the outer container. Every other `div` prop is spread there too.