# Multiplayer

> Multiplayer moments: live cursors, avatar stacks, comment pins and simultaneous typing.

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

## Variants

### Cursors

Three named cursors share a canvas: one drags a sticky note, one draws a selection.

Install: `npx shadcn@latest add @geturui-pro/multiplayer-cursors`

```tsx
import { MultiplayerCursors } from "@/components/illustrations/multiplayer/cursors";

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

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (eight seconds 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. |

### Avatars (monogram)

Monogram avatars join with a presence ring, the oldest slides out and the overflow count ticks.

Install: `npx shadcn@latest add @geturui-pro/multiplayer-avatars-monogram`

```tsx
import { MultiplayerAvatarsMonogram } from "@/components/illustrations/multiplayer/avatars-monogram";

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

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (2.2 seconds per join 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. |

### Comments

Comment pins drop in, one opens into a thread, a reply is typed and the thread resolves.

Install: `npx shadcn@latest add @geturui-pro/multiplayer-comments`

```tsx
import { MultiplayerComments } from "@/components/illustrations/multiplayer/comments";

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

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (seven seconds 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. |

### Typing

Two collaborators type at once behind name-flagged carets while a typing indicator bubbles.

Install: `npx shadcn@latest add @geturui-pro/multiplayer-typing`

```tsx
import { MultiplayerTyping } from "@/components/illustrations/multiplayer/typing";

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

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (seven seconds 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.