> ## 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 yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltCursorPointerWireframe

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe>
            <VeltCursorPointerWireframe.Arrow />
            <VeltCursorPointerWireframe.Avatar />
            <VeltCursorPointerWireframe.Default />
            <VeltCursorPointerWireframe.AudioHuddle />
            <VeltCursorPointerWireframe.VideoHuddle />
        </VeltCursorPointerWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Arrow

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.Arrow />
    </VeltWireframe>
    ```
  </Tab>

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

### Avatar

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.Avatar />
    </VeltWireframe>
    ```
  </Tab>

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

### Default

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.Default>
            <VeltCursorPointerWireframe.Default.Name />
            <VeltCursorPointerWireframe.Default.Comment />
        </VeltCursorPointerWireframe.Default>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Name

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.Default.Name />
    </VeltWireframe>
    ```
  </Tab>

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

#### Comment

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.Default.Comment />
    </VeltWireframe>
    ```
  </Tab>

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

### AudioHuddle

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.AudioHuddle>
            <VeltCursorPointerWireframe.AudioHuddle.Avatar />
            <VeltCursorPointerWireframe.AudioHuddle.Audio />
        </VeltCursorPointerWireframe.AudioHuddle>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Avatar

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.AudioHuddle.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Audio

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.AudioHuddle.Audio />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### VideoHuddle

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCursorPointerWireframe.VideoHuddle />
    </VeltWireframe>
    ```
  </Tab>

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