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

VeltTextCommentToolbarWireframe

<VeltWireframe>
    <VeltTextCommentToolbarWireframe>
        <VeltTextCommentToolbarWireframe.CommentAnnotation />
        <VeltTextCommentToolbarWireframe.Divider />
        <VeltTextCommentToolbarWireframe.Copywriter />
        <VeltTextCommentToolbarWireframe.Generic />
    </VeltTextCommentToolbarWireframe>
</VeltWireframe>

CommentAnnotation

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.CommentAnnotation />
</VeltWireframe>

Divider

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Divider />
</VeltWireframe>

Copywriter

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Copywriter />
</VeltWireframe>

Generic

<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Generic />
</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

<VeltComments shadowDom={false} textCommentToolbarShadowDom={false} />

Dark Mode

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

Default: false

Using Props:

<VeltComments textCommentToolbarDarkMode={true} />

Using API:

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