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

​
VeltCommentPinWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe>
        <VeltCommentPinWireframe.GhostCommentIndicator />
        <VeltCommentPinWireframe.Index />
        <VeltCommentPinWireframe.Number />
        <VeltCommentPinWireframe.PrivateCommentIndicator />
        <VeltCommentPinWireframe.Triangle />
        <VeltCommentPinWireframe.UnreadCommentIndicator />
    </VeltCommentPinWireframe>
</VeltWireframe>

​
GhostCommentIndicator

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.GhostCommentIndicator />
</VeltWireframe>

​
Index

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.Index />
</VeltWireframe>

​
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
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.Number />
</VeltWireframe>

​
PrivateCommentIndicator

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.PrivateCommentIndicator />
</VeltWireframe>

​
Triangle

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.Triangle />
</VeltWireframe>

​
UnreadCommentIndicator

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltWireframe>

​
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
  • Other Frameworks
Using Props:
<VeltComments pinShadowDOM={false} />
Using API:
const commentElement = client.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
  • Other Frameworks
Using Props:
<VeltComments pinDarkMode={true}/>
Using API:
const commentElement = client.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
  • Other Frameworks
<VeltCommentPin variant="CUSTOM_VARIANT" />