> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-21cab773.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Tool

> The button to add new comments.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltCommentToolWireframe

<img src="https://mintcdn.com/velt-mintlify-21cab773/PI_FHxZz6RVrYWcV/images/customization/comments/comment-tool/comment-tool.png?fit=max&auto=format&n=PI_FHxZz6RVrYWcV&q=85&s=420e2d35656a54e1d203aed49b3278ee" alt="" width="1024" height="576" data-path="images/customization/comments/comment-tool/comment-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltCommentToolWireframe>
            {/* Your custom element */}
        </VeltCommentToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-comment-tool-wireframe>
            <!-- Your custom element -->
        </velt-comment-tool-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## 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`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentTool shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-comment-tool shadow-dom="false"></velt-comment-tool>
    ```
  </Tab>
</Tabs>

### Dark Mode

<img src="https://mintcdn.com/velt-mintlify-21cab773/AA5sMZNuTj_NMkKn/images/customization/velt-comment-tool-1.png?fit=max&auto=format&n=AA5sMZNuTj_NMkKn&q=85&s=69f1610969c19e1c645908e88c2fa409" alt="" width="1024" height="576" data-path="images/customization/velt-comment-tool-1.png" />

Default: `false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltCommentTool darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    <velt-comment-tool dark-mode="true"></velt-comment-tool>
    ```
  </Tab>
</Tabs>