Radial Hub Diagram
ProA hub-and-spoke diagram with dashed connectors. Hover it and every node swells on a spring while the lines brighten and their dashes flow toward the hub.
Installation
npx shadcn add @useplanes/radial-hub-diagram
Unlock with Planes Pro
$99 once · 80 Pro components · lifetime updates.
<RadialHubDiagram
nodes={[
{ label: "Auth", icon: <KeyRound /> },
{ label: "Search", icon: <SearchIcon /> },
{ label: "Cache", icon: <Zap /> },
{ label: "Queue", icon: <List /> },
{ label: "Storage", icon: <Database /> },
{ label: "Metrics", icon: <BarChart /> },
]}
center={<Cpu />}
/>Use cases
Integration diagrams
Show every service or device that connects through your platform.
Feature hubs
A landing-page graphic that puts your product at the center of its ecosystem.
Architecture overviews
A quick visual of services fanning out from a core API or gateway.
Docs and onboarding
Orient new users around what plugs into the thing they just installed.
Related components
All Sections components
Pricing Table
A pricing section with a billing toggle, prices that roll when you switch, and a highlighted popular tier.
Mega Menu
A navigation panel that reshapes to each menu's content instead of swapping — measured width and height, a caret that tracks the trigger, keyboard-driven.
FAQ Section
An FAQ accordion where rows pop in, panels unfold on a spring, and the plus icon twists into a close mark.
Integration Beams
Integration logos fire a synchronized wave of light pulses along drawn beams that converge on a central hub, which swells and ripples as they land together.
World Map
A dotted world map where comets of light arc between cities, each landing with a ripple. Markers pulse idly and reveal their labels on hover.
Dotted Globe
A rotating globe of land dots with your locations glowing as accent markers, each sending out a slow ripple. Drag to spin it — momentum hands back to the idle rotation.