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

> [!NOTE]
>
> We recommend that you familiarize yourself with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

This component is a thin wrapper around the [Comment Dialog](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md) component.

## VeltCommentThreadWireframe

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentThreadWireframe>
>     <VeltCommentDialogWireframe />
> </VeltCommentThreadWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-thread-wireframe>
>     <velt-comment-dialog-wireframe></velt-comment-dialog-wireframe>
> </velt-comment-thread-wireframe>
> ```

### VeltCommentDialogWireframe

You can find the wireframe for the `Comment Dialog` [here](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md).

## 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}
> <VeltCommentThread shadowDom={false} />
> ```

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

### Dark Mode

![](https://mintcdn.com/velt/kAkMSIYF4ZlrlwLm/images/dark-light-mode.png?fit=max\&auto=format\&n=kAkMSIYF4ZlrlwLm\&q=85\&s=5fbc0452bff061cfdf17b8296c1a50d0)

`Default: false`

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

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

### Variants

* Define variants for the entire Comment Thread component. This will enable you to show different Thread UI in different parts of your app.
* Alternatively, define a variant for the Comment Dialog component and use it here. This will enable you to show different Comment Dialog UI on the DOM vs here.
* Learn more about how to define and use variants [here](https://velt.dev/docs/ui-customization/wireframes/layout-customization.md#variants).

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentThread 
>   variant="component-variant" 
>   dialogVariant="dialog-variant"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-thread 
>   dialog-variant="dialog-variant"
>   variant="component-variant"
> ></velt-comment-thread> 
> ```


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