Comment Pin Wireframes

Wireframe components for building custom Comment Pin UIs — override pin markers, avatars, and unread badges with your own HTML and design system.

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

VeltCommentPinWireframe

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe>
        <VeltCommentPinWireframe.GhostCommentIndicator />
        <VeltCommentPinWireframe.Index />
        <VeltCommentPinWireframe.Number />
        <VeltCommentPinWireframe.PrivateCommentIndicator />
        <VeltCommentPinWireframe.Triangle />
        <VeltCommentPinWireframe.UnreadCommentIndicator />
    </VeltCommentPinWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-wireframe>
        <velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
        <velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
        <velt-comment-pin-number-wireframe></velt-comment-pin-number-wireframe>
        <velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
        <velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
        <velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-wireframe>
    </velt-comment-pin-wireframe>
</velt-wireframe>

GhostCommentIndicator

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.GhostCommentIndicator />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
</velt-wireframe>

Index

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.Index />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
</velt-wireframe>

Number

The annotation number displays on comment pins, providing a persistent identifier for each comment that remains constant across sessions. This number makes it easy to reference specific comments in team discussions or documentation.

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.Number />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-number-wireframe></velt-comment-pin-number-wireframe>
</velt-wireframe>

PrivateCommentIndicator

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.PrivateCommentIndicator />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
</velt-wireframe>

Triangle

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.Triangle />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
</velt-wireframe>

UnreadCommentIndicator

React / Next.js

<VeltWireframe>
    <VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-wireframe>
</velt-wireframe>

Styling

Disable ShadowDOM

• By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
• Disable the shadow dom to apply your custom CSS to the component.

Default: true

React / Next.js

Using Props:

<VeltComments pinShadowDOM={false} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();

Other Frameworks

Using Props:

<velt-comments pin-shadow-dom="false"></velt-comments>

Using API:

const commentElement = Velt.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();

Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.

Default: false

React / Next.js

Using Props:

<VeltComments pinDarkMode={true}/>

Using API:

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

Other Frameworks

Using Props:

<velt-comments pin-dark-mode="true"></velt-comments>

Using API:

const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

Variants

• Define variants for the Velt Comment Pin component. This is useful for customizing how the pin looks on different elements like charts, tables, etc.
• Learn more about how to define and use variants here.

React / Next.js

<VeltCommentPin variant="CUSTOM_VARIANT" />

Other Frameworks

<velt-comment-pin variant="CUSTOM_VARIANT"></velt-comment-pin>