Hub and Spoke

4 variantsNewPro

A central hub wired to surrounding nodes with curved links; pulses travel along the links on a staggered loop.

illustrationsvghubnetworkintegrationsagentsteamloop

Payments

payments.tsx

Cards, banks and wallets send payments into a pulsing hub with a running total.

$npx shadcn@latest add @geturui-pro/hub-and-spoke-payments

Prop	Type	Default	Description
`total`	`string`	`"$12,480"`	Figure shown under the hub.
`speed`	`number`	`1`	Speed multiplier for the loop (three seconds per pulse at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

data.tsx

Sources stream into a database hub with spinning sync arcs that fans data out to destinations.

$npx shadcn@latest add @geturui-pro/hub-and-spoke-data

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (2.8 seconds per batch at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

team.tsx

Teammates exchange messages with a shared workspace; chat bubbles pop as messages land.

$npx shadcn@latest add @geturui-pro/hub-and-spoke-team

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (four seconds per round at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

agents.tsx

An orchestrator dispatches work to blinking agents and collects results as status rings spin.

$npx shadcn@latest add @geturui-pro/hub-and-spoke-agents

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (3.6 seconds per round at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

Installs every hub and spoke variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/hub-and-spoke

Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.