User Cursor

A Figma-style collaborative cursor with an arrow pointer and a rounded name label.

Overview

UserCursor renders the classic Figma-style presence indicator: an arrow cursor with a pill label showing the user's name. Both elements share a single color prop so each participant gets a distinct identity at a glance.

The component is purely presentational — it has no motion or positioning logic. Place it inside a position: relative container and position it with style or CSS to match your multiplayer or canvas setup.

Preview

Alice

Customize

Name
Color#7c3aed
Cursor Variant
Label Variant
Label Hidden

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add user-cursor

Usage

import { UserCursor } from "@/components/ui/user-cursor";

export function Demo() {
  return <UserCursor name="Alice" color="#7c3aed" />;
}

Examples

Label variants

Choose from five label shapes via the labelVariant prop. The default is rounded.

Alice
Rounded
Alice
Pill
Alice
Bubble
Alice
Chat
Alice
Square

Cursor variants

Two arrow shapes: "default" has a diagonal stem; "minimal" is a clean Figma-style triangular arrow.

Alice
Default
Alice
Minimal

Hover to try

Move your cursor into the box — your native cursor is hidden and replaced with a UserCursor.

Hover here

Colors

Each cursor gets its own color. The arrow and label share the same accent.

Alice
Bob
Charlie

Label hidden

Set labelHidden to show only the arrow — useful in dense UIs.

On a canvas

Positioned absolutely inside a relative container to simulate a shared canvas.

Canvas area
Alice
Bob
Charlie

In practice

A collaborative canvas that renders remote users' cursors at their reported positions. Each user gets a color from a fixed palette.

Canvas area
Alice
Bob
Charlie

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
namestring—Display name shown in the label next to the cursor pointer.
colorstring"var(--primary)"Accent color for both the cursor fill and label background. Accepts any CSS color value.
cursorVariant"default" | "minimal""default"Arrow shape. "default" has a diagonal stem (cursor.chat style); "minimal" is a clean triangular arrow without the stem (Figma style).
labelVariant"rounded" | "pill" | "bubble" | "chat" | "square""rounded"Visual shape of the name label. "rounded" is compact with rounded corners; "pill" is fully capsule-shaped; "bubble" adds a pointed tail; "chat" has one flat corner like a message bubble; "square" removes all rounding.
labelHiddenbooleanfalseHide the name label. Useful when only the pointer is needed.
classNamestring—Extra classes applied to the wrapper element.

Accessibility

The SVG pointer is aria-hidden — it is a decorative presence indicator and carries no actionable information. The name label is visible text.

  • Do not rely on color alone to distinguish users. Consider pairing color with initials or a full name label.
  • When cursors are keyboard-inaccessible overlays, wrap the canvas with an ARIA live region that announces when remote users join or leave.