Cursors

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

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltCursorPointerWireframe

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe>
        <VeltCursorPointerWireframe.Arrow />
        <VeltCursorPointerWireframe.Avatar />
        <VeltCursorPointerWireframe.Default />
        <VeltCursorPointerWireframe.AudioHuddle />
        <VeltCursorPointerWireframe.VideoHuddle />
    </VeltCursorPointerWireframe>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.Arrow />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-arrow-wireframe></velt-cursor-pointer-arrow-wireframe>
</velt-wireframe>

Avatar

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.Avatar />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-avatar-wireframe></velt-cursor-pointer-avatar-wireframe>
</velt-wireframe>

Default

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.Default>
        <VeltCursorPointerWireframe.Default.Name />
        <VeltCursorPointerWireframe.Default.Comment />
    </VeltCursorPointerWireframe.Default>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.Default.Name />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-default-name-wireframe></velt-cursor-pointer-default-name-wireframe>
</velt-wireframe>

Comment

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.Default.Comment />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-default-comment-wireframe></velt-cursor-pointer-default-comment-wireframe>
</velt-wireframe>

AudioHuddle

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle>
        <VeltCursorPointerWireframe.AudioHuddle.Avatar />
        <VeltCursorPointerWireframe.AudioHuddle.Audio />
    </VeltCursorPointerWireframe.AudioHuddle>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle.Avatar />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-audio-huddle-avatar-wireframe></velt-cursor-pointer-audio-huddle-avatar-wireframe>
</velt-wireframe>

Audio

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle.Audio />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-audio-huddle-audio-wireframe></velt-cursor-pointer-audio-huddle-audio-wireframe>
</velt-wireframe>

VideoHuddle

React / Next.js

<VeltWireframe>
    <VeltCursorPointerWireframe.VideoHuddle />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-video-huddle-wireframe></velt-cursor-pointer-video-huddle-wireframe>
</velt-wireframe>