Multiplayer

4 variantsNewPro

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

illustrationsvgmultiplayerpresencecollaborationcursorscommentsloop

Cursors

cursors.tsx

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

$npx shadcn@latest add @geturui-pro/multiplayer-cursors

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

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

$npx shadcn@latest add @geturui-pro/multiplayer-avatars-monogram

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

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

$npx shadcn@latest add @geturui-pro/multiplayer-comments

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

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

$npx shadcn@latest add @geturui-pro/multiplayer-typing

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.

Installs every multiplayer 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/multiplayer

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.