Cursor
Custom cursor follower that trails the pointer. Install Cursor from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
2 storiesView componentLive Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip. Install Live Cursor from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Live Cursor renders a remote user's pointer on a shared canvas or document, positioned by x and y pixel coordinates, with an optional name-and-status chip beside it. It is pure presentation: your app owns the realtime stream and maps each user to a color, then feeds coordinates in. The wrapper is pointer-events none, so it never blocks the interactions underneath. Use it to build multiplayer cursors for collaborative editors, whiteboards, and design tools.
UtilityPreview
Switch between light and dark to inspect the embedded Storybook preview.
Remote user's cursor rendered at canvas coordinates with name + status chip. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add Live Cursor to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/live-cursor.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Live Cursor?
- Live Cursor is a React component that draws another user's cursor at given canvas coordinates, with an optional name and status chip. It is presentation-only — you supply the position, color, and name from your realtime layer.
- How do I add Live Cursor to my app?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/live-cursor.json`, then render `<LiveCursor x={x} y={y} name="Bea" color="#5b8def" />` inside a positioned container.
- Does Live Cursor block clicks on the canvas underneath?
- No. The cursor wrapper uses pointer-events none, so gestures pass through to the canvas. It also sets `role="img"` with an aria-label derived from the user's name for screen readers.