> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cursors

> The Cursors component displays the cursors of users in a document.

> [!NOTE]
>
> We recommend that you familiarize yourself with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## VeltCursorPointerWireframe

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe>
>         <VeltCursorPointerWireframe.Arrow />
>         <VeltCursorPointerWireframe.Avatar />
>         <VeltCursorPointerWireframe.Default />
>         <VeltCursorPointerWireframe.AudioHuddle />
>         <VeltCursorPointerWireframe.VideoHuddle />
>     </VeltCursorPointerWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>   <velt-cursor-pointer-wireframe>
>     <velt-cursor-pointer-arrow-wireframe></velt-cursor-pointer-arrow-wireframe>
>     <velt-cursor-pointer-avatar-wireframe></velt-cursor-pointer-avatar-wireframe>
>     <velt-cursor-pointer-default-wireframe></velt-cursor-pointer-default-wireframe>
>     <velt-cursor-pointer-audio-huddle-wireframe></velt-cursor-pointer-audio-huddle-wireframe>
>     <velt-cursor-pointer-video-huddle-wireframe></velt-cursor-pointer-video-huddle-wireframe>
>   </velt-cursor-pointer-wireframe>
> </velt-wireframe>
> ```

### Arrow

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.Arrow />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-arrow-wireframe></velt-cursor-pointer-arrow-wireframe>
> </velt-wireframe>
> ```

### Avatar

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.Avatar />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-avatar-wireframe></velt-cursor-pointer-avatar-wireframe>
> </velt-wireframe>
> ```

### Default

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.Default>
>         <VeltCursorPointerWireframe.Default.Name />
>         <VeltCursorPointerWireframe.Default.Comment />
>     </VeltCursorPointerWireframe.Default>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-default-wireframe>
>         <velt-cursor-pointer-default-name-wireframe></velt-cursor-pointer-default-name-wireframe>
>         <velt-cursor-pointer-default-comment-wireframe></velt-cursor-pointer-default-comment-wireframe>
>     </velt-cursor-pointer-default-wireframe>
> </velt-wireframe>
> ```

#### Name

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.Default.Name />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-default-name-wireframe></velt-cursor-pointer-default-name-wireframe>
> </velt-wireframe>
> ```

#### Comment

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.Default.Comment />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-default-comment-wireframe></velt-cursor-pointer-default-comment-wireframe>
> </velt-wireframe>
> ```

### AudioHuddle

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.AudioHuddle>
>         <VeltCursorPointerWireframe.AudioHuddle.Avatar />
>         <VeltCursorPointerWireframe.AudioHuddle.Audio />
>     </VeltCursorPointerWireframe.AudioHuddle>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-audio-huddle-wireframe>
>         <velt-cursor-pointer-audio-huddle-avatar-wireframe></velt-cursor-pointer-audio-huddle-avatar-wireframe>
>         <velt-cursor-pointer-audio-huddle-audio-wireframe></velt-cursor-pointer-audio-huddle-audio-wireframe>
>     </velt-cursor-pointer-audio-huddle-wireframe>
> </velt-wireframe>
> ```

#### Avatar

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.AudioHuddle.Avatar />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-audio-huddle-avatar-wireframe></velt-cursor-pointer-audio-huddle-avatar-wireframe>
> </velt-wireframe>
> ```

#### Audio

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.AudioHuddle.Audio />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-audio-huddle-audio-wireframe></velt-cursor-pointer-audio-huddle-audio-wireframe>
> </velt-wireframe>
> ```

### VideoHuddle

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCursorPointerWireframe.VideoHuddle />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-cursor-pointer-video-huddle-wireframe></velt-cursor-pointer-video-huddle-wireframe>
> </velt-wireframe>
> ```

## Limitations

* **There is no live-cursor pin or image prop.** `pin-cursor-image` is a `VeltComments` prop for the comment-placement cursor, **not** live cursors. To change the live cursor glyph, use the `<slot name="cursor">` or the `.Arrow` wireframe above.
* **The root `<velt-cursor>` isn't wireframable.** It spawns one pointer per remote user; only the per-user pointer has a wireframe.
* **Your own cursor is hidden in normal use.** `selfCursorPointer` renders only in huddle-on-cursor mode.
* **Requires an identified (non-anonymous) user.**


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.