> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/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 UIs — override formatting controls, action buttons, and selection menus with your own HTML.

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

## VeltTextCommentToolbarWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/text-comment-toolbar/comment-text-toolbar-overview.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=17c1c04ae1e83731317feb93fff55bd9" alt="" width="1280" height="370" data-path="images/customization/comments/text-comment-toolbar/comment-text-toolbar-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTextCommentToolbarWireframe>
            <VeltTextCommentToolbarWireframe.CommentAnnotation />
            <VeltTextCommentToolbarWireframe.Divider />
            <VeltTextCommentToolbarWireframe.Copywriter />
            <VeltTextCommentToolbarWireframe.Generic />
        </VeltTextCommentToolbarWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## CommentAnnotation

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/text-comment-toolbar/comment-text-toolbar-comment-tool.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=27e191134f341c6aa5010da124e928c0" alt="" width="1280" height="370" data-path="images/customization/comments/text-comment-toolbar/comment-text-toolbar-comment-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTextCommentToolbarWireframe.CommentAnnotation />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Divider

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/text-comment-toolbar/comment-text-toolbar-divider.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=f71a58b279d029b9cc3e26fb9b5abe39" alt="" width="1280" height="370" data-path="images/customization/comments/text-comment-toolbar/comment-text-toolbar-divider.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTextCommentToolbarWireframe.Divider />
    </VeltWireframe>
    ```
  </Tab>

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

## Copywriter

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/text-comment-toolbar/comment-text-toolbar-copywriter.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=8feb81b8751c0518b9e1b520da5abb05" alt="" width="1280" height="370" data-path="images/customization/comments/text-comment-toolbar/comment-text-toolbar-copywriter.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTextCommentToolbarWireframe.Copywriter />
    </VeltWireframe>
    ```
  </Tab>

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

## Generic

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/text-comment-toolbar/comment-text-toolbar-generic.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=9042a21d11ee70d8bae3195a29c238d7" alt="" width="1280" height="370" data-path="images/customization/comments/text-comment-toolbar/comment-text-toolbar-generic.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTextCommentToolbarWireframe.Generic />
    </VeltWireframe>
    ```
  </Tab>

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

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

### Dark Mode

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

Default: `false`

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>
