# Hub and Spoke

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

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/hub-and-spoke
- Install: `npx shadcn@latest add @geturui-pro/hub-and-spoke`
- Dependencies: motion

## Variants

### Payments

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

Install: `npx shadcn@latest add @geturui-pro/hub-and-spoke-payments`

```tsx
import { HubSpokePayments } from "@/components/illustrations/hub-and-spoke/payments";

export function PaymentsIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <HubSpokePayments total="$84,210" className="w-full" />
    </div>
  );
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/hub-and-spoke-data`

```tsx
import { HubSpokeData } from "@/components/illustrations/hub-and-spoke/data";

export function DataIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <HubSpokeData className="w-full" />
    </div>
  );
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/hub-and-spoke-team`

```tsx
import { HubSpokeTeam } from "@/components/illustrations/hub-and-spoke/team";

export function TeamIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <HubSpokeTeam className="w-full" />
    </div>
  );
}
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/hub-and-spoke-agents`

```tsx
import { HubSpokeAgents } from "@/components/illustrations/hub-and-spoke/agents";

export function AgentsIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <HubSpokeAgents className="w-full" />
    </div>
  );
}
```

| 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. |

## Accessibility

- 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.