This component creates a real-time collaborative cursor tracking area on your canvas that shows multiple users' cursor positions simultaneously on the screen with unique colored cursors similar to Figma cursor editing. Each cursor smoothly follows its user's movements and automatically fades out when inactive. Just drag and drop, no additional set up/subscription/API required
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the LiveCursor component into your project file
Customize the appearance through the properties panel
Publish the page and open the URL
To test the component, open the same page in two browser windows side by side, or use different devices to view the same page
The component will automatically start tracking cursors when multiple users view the same page simultaneously, with each cursor appearing in a different color and fading out after inactivity
The component comes pre-connected to a public Supabase database that tracks cursor positions per page in real-time, making it truly drag-and-drop ready. Through the property controls, you can customize:
Cursor Size: Control how large the cursor appears (range: 12-100 pixels)
Background Color: Set the background color of the container
The database connection handles all the real-time cursor tracking and page-specific user management automatically, so no additional configuration is required.
Note: The component uses a shared public Supabase instance with rate limiting and row-level security in place. While this isn't the most secure approach, it enables drag-and-drop functionality since we're only tracking basic interactions.
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
