> ## 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 Bubble Wireframes

> Wireframe components for building custom Comment Bubble 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.

## VeltCommentBubbleWireframe

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltCommentBubbleWireframe>
>         <VeltCommentBubbleWireframe.CommentsCount />
>         <VeltCommentBubbleWireframe.Avatar />
>         <VeltCommentBubbleWireframe.UnreadIcon />
>     </VeltCommentBubbleWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-comment-bubble-wireframe>
>         <velt-comment-bubble-comments-count-wireframe></velt-comment-bubble-comments-count-wireframe>
>         <velt-comment-bubble-avatar-wireframe></velt-comment-bubble-avatar-wireframe>
>         <velt-comment-bubble-unread-icon-wireframe></velt-comment-bubble-unread-icon-wireframe>
>     </velt-comment-bubble-wireframe>
> </velt-wireframe>
> ```

## CommentsCount

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

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

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

## Avatar

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

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

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

## UnreadIcon

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

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-comment-bubble-unread-icon-wireframe></velt-comment-bubble-unread-icon-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}
> <VeltCommentBubble shadowDom={false} />
> ```

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

### 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}
> <VeltCommentBubble darkMode={true} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```

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

### Open Dialog on Click

Control whether the comment dialog opens when the bubble is clicked.

Default: `true`

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

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-bubble open-dialog="false"></velt-comment-bubble>
> ```


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