> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/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](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## VeltCommentToolWireframe

![](https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/comment-tool/comment-tool.png?fit=max\&auto=format\&n=2O8vk8YlVD4Kq-ni\&q=85\&s=8b67192d0a9d425abb02b1fd76239070)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCommentToolWireframe>
>         {/* Your custom element */}
>     </VeltCommentToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-comment-tool-wireframe>
>         <!-- Your custom element -->
>     </velt-comment-tool-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`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentTool shadowDom={false} />
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <velt-comment-tool shadow-dom="false"></velt-comment-tool>
> ```

### Dark Mode

![](https://mintcdn.com/velt/kAkMSIYF4ZlrlwLm/images/customization/velt-comment-tool-1.png?fit=max\&auto=format\&n=kAkMSIYF4ZlrlwLm\&q=85\&s=65ae5eea4040d5ed64947488f24c75c7)

Default: `false`

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltCommentTool darkMode={true} />
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> <velt-comment-tool dark-mode="true"></velt-comment-tool>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.