Network Graph

A layered orbital avatar visual that spreads items evenly across concentric rings. It works well for community showcases, team maps, social proof sections, and dense relationship-driven hero layouts.

Unlike static canvases or heavy physics engines, this component dynamically handles the math for you. Simply assign a ring index to each node (e.g., Ring 1, Ring 2), and the component will automatically space the avatars evenly in perfect 360-degree circles using percentage-based rendering that scales flawlessly on mobile.

Assign each node a ring index and the component spaces that ring evenly across a full 360°. Hover an avatar for its tooltip, or hit the reload button to replay the staggered spring entrance.

Interactive rings

Drag the sliders above to reshape the orbits live, then copy the numbers straight into your own NetworkGraph.

ringCount: is how many orbits draw. A node whose ring exceeds this is not rendered at all.
baseRadius: is the first ring's radius as a percentage of the square container, so it scales with the box.
ringGap: is the percentage added for each subsequent ring.
orbitSpeed: multiplies the rotation rate — 2 is twice as fast, 0.5 half. Rings still alternate direction for depth.
SetanimateOrbit{false}: to stop the planetary motion. animateIn is separate, so the entrance still plays.

Active Color

Ring Count3

Base Radius18%

Ring Gap16%

Orbit Speed1.00x

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 Network Graph

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

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

Install dependencies

Nothing beyond the shared setup — Network Graph needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Usage Guidelines

Keep outer rings denser than inner ones — nodes are spaced by count, so a ring holding two avatars leaves a large visual gap. Give distant rings size="sm" so the composition reads as depth rather than clutter.

Props Reference

Prop	Type	Default	Description
`nodes`	`NetworkNode[]`	Required	The avatars to place. Each node is grouped by its `ring` and spaced evenly around that orbit.
`centerNode`	`{ image?, fallback?, label? }`	`undefined`	Optional hub avatar rendered at the centre of every ring.
`ringCount`	`number`	`3`	How many orbits to draw. Nodes whose `ring` exceeds this are not rendered.
`baseRadius`	`number`	`15`	Radius of the first ring, as a percentage of the square container.
`ringGap`	`number`	`15`	Percentage added to the radius for each subsequent ring.
`animateIn`	`boolean`	`true`	Plays the staggered spring entrance on mount.
`animateOrbit`	`boolean`	`true`	Continuously rotates each ring, alternating direction per ring while counter-rotating the avatars so they stay upright.
`orbitSpeed`	`number`	`1`	Speed multiplier for the orbit — `2` is twice as fast.

NetworkNode Object

Property	Type	Default	Description
`id`	`string`	Required	Stable React key for the node.
`ring`	`number`	Required	Which orbit the node belongs to — `1` is innermost.
`image`	`string`	`undefined`	Avatar image URL.
`fallback`	`string`	`undefined`	Initials shown when no `image` is given.
`label`	`string`	`undefined`	Tooltip text revealed on hover.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Avatar diameter — use smaller sizes on outer rings to suggest depth.