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

# Text Comment Toolbar Wireframes

> Wireframe components for building custom Text Comment Toolbar interfaces with maximum flexibility.

> [!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.

## VeltTextCommentToolbarWireframe

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/text-comment-toolbar/comment-text-toolbar-overview.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=a72f1743e124b6e6f888a53ee25a93d1)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTextCommentToolbarWireframe>
>         <VeltTextCommentToolbarWireframe.CommentAnnotation />
>         <VeltTextCommentToolbarWireframe.Divider />
>         <VeltTextCommentToolbarWireframe.Copywriter />
>         <VeltTextCommentToolbarWireframe.Generic />
>     </VeltTextCommentToolbarWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-text-comment-toolbar-wireframe>
>         <velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
>         <velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
>         <velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
>         <velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-wireframe>
>     </velt-text-comment-toolbar-wireframe>
> </velt-wireframe>
> ```

## CommentAnnotation

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/text-comment-toolbar/comment-text-toolbar-comment-tool.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=2258104048789012bfbbb19f4a55f28c)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTextCommentToolbarWireframe.CommentAnnotation />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
> </velt-wireframe>
> ```

## Divider

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/text-comment-toolbar/comment-text-toolbar-divider.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=aa816b2fd7e6d5310e509a1fc3df8a03)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTextCommentToolbarWireframe.Divider />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
> </velt-wireframe>
> ```

## Copywriter

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/text-comment-toolbar/comment-text-toolbar-copywriter.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=515dfca8b0e975365e9733a8028b8433)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTextCommentToolbarWireframe.Copywriter />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
> </velt-wireframe>
> ```

## Generic

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/text-comment-toolbar/comment-text-toolbar-generic.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=d95951d727af00444c90cb5b8e21061c)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTextCommentToolbarWireframe.Generic />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-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}
> <VeltComments shadowDom={false} textCommentToolbarShadowDom={false} />
> ```

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

### Dark Mode

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

Default: `false`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```js theme={null}
> <VeltComments textCommentToolbarDarkMode={true} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```js theme={null}
> <velt-comments text-comment-toolbar-dark-mode="true"></velt-comments>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```


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