Elements
LiveCursor
A collaborator's cursor — a fixed-orientation pointer icon with an optional name pill — for real-time multiplayer presence, optionally positioned absolutely via `x`/`y`.
<UiLiveCursor />Color
color colors the cursor and its label pill together — one per collaborator.
Label
label is the collaborator's name, in the pill beside the cursor. Leave it off for a bare cursor; it's ignored entirely when you fill the default slot.
Size
size is the cursor icon's size in pixels. The pill scales with it.
The pill's position is derived from size (left/top at ~1.05/0.82 of it), not a fixed offset, so it stays glued to the same spot relative to the glyph at any size. Those ratios sit clear of the icon's own drawn path (with margin for the default tilt) so the two never visually overlap.
Both the icon and pill are pointer-events-none — a live cursor representing someone else shouldn't be able to intercept clicks meant for the content underneath it.
X
Horizontal position in pixels from the nearest positioned ancestor. Setting either x or y switches the cursor into absolute positioning.
There's no angle/rotation prop — you never set the cursor's rotation directly. It's derived instead: a fixed -20° tilt at rest, plus whatever extra rotation keeps the tip pointing away from wherever the pill actually ended up (only relevant once clamping has nudged it off its default spot).
Setting either x or y (not both required) switches the root to position: absolute. The nearest ancestor needs position: relative (or similar) for that to anchor sensibly — same requirement as FloatingActionButtons' container prop.
The icon rotates to compensate whenever clamping moves the pill off its default down-right spot (e.g. near a container's corner) — its tip keeps pointing away from the pill's contour and its tail toward it, aimed at the pill's actual measured center rather than just its left/top anchor corner, so a longer label (a wider pill) doesn't throw the angle off. The rotation pivots around transform-origin: 0 0 — the icon's local origin, i.e. the exact x/y coordinate passed in — not the glyph's drawn tip or its center, so the actual collaborator position never visually drifts as the icon spins.
Y
y is the vertical half of the same pair.
Container
container confines the pill's clamping to this element's box rather than the whole viewport, so a cursor near the right edge flips inside the board instead of hanging off it. Move your mouse over the board below.
Move your mouse here
The pill is clamped to stay fully within the viewport by default (8px margin), using the same measure-and-nudge logic as Tooltip's updatePosition — it re-measures on mount, on window resize/scroll, and whenever x/y/size/label/color/container change. Pass container (the same bounded element x/y are tracked within) to clamp against that box instead of the viewport — otherwise a small, non-viewport-edge container won't actually keep the pill inside it, only inside the browser window.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral"'primary'stringnumberHTMLElement | nullundefined (the viewport)Slots
default