---
title: Realtime Cursor
description: Real-time cursor sharing for collaborative applications
---

<div className="flex flex-row -space-x-px w-full">
  <BlockPreview name="realtime-cursor-demo" isPair />
  <BlockPreview name="realtime-cursor-demo" isPair />
</div>

## Installation

<BlockItem
  name="realtime-cursor-react"
  description="Renders realtime cursors from other users in a room."
/>

## Folder structure

<RegistryBlock itemName="realtime-cursor-react" />

## Introduction

The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.

**Features**

- Broadcast cursor position to other users in the same room
- Customizable cursor appearance
- Presence detection (automatically joins/leaves users)
- Low-latency updates using Supabase Realtime
- Room-based isolation for scoped collaboration

## Usage

The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.

```tsx
import { RealtimeCursors } from '@/components/realtime-cursors'

export default function Page() {
  return (
    <div className="w-full min-h-screen">
      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
    </div>
  )
}
```

## Props

| Prop       | Type     | Description                                                |
| ---------- | -------- | ---------------------------------------------------------- |
| `roomName` | `string` | Unique identifier for the shared room or session.          |
| `username` | `string` | Name of the current user; used to track and label cursors. |

## Further reading

- [Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)