Integration Hub

Brand hub with a pyramid of connected apps and a looping pulse that travels down each branch.

npx shadcn@latest add integration-hub

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSFramer Motion

Props

PropTypeDescription
hubHubNodeCentral brand node — name, optional logo URL, brand color
itemsIntegrationItem[]Connected apps arranged in a pyramid under the hub
accentColorstringStroke / pulse color for the connection lines
backgroundstringSection background (transparent by default)
classNamestringStyles for the outer shell