Live cursors
ProOther people’s pointers and selections over shared content, named and coloured to match the presence stack, with idle cursors fading and a plain sentence for screen readers about who is doing what.
pnpm dlx shadcn@latest add @caliper/live-cursorsPricing
Every plan includes unlimited projects and email support.
Pricing page: Tomás is editing, Priya is here, Amara is here.
When to use #
Use it for
- Canvases, whiteboards, spreadsheets and design tools.
- Live sessions where pointing matters.
Skip it when
- Text documents where a caret per person is clearer.
Installation #
pnpm dlx shadcn@latest add @caliper/live-cursors
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { LiveCursors } from "@/components/ui/live-cursors"
The worked example comes with Pro
The 44-line example behind the preview opens here with a Pro or Team licence.
API reference #
LiveCursors
component
Accessibility #
It is built on native elements and keeps aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.