> ## 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 yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

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

## VeltCommentThreadWireframe

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentThreadWireframe>
        <VeltCommentDialogWireframe />
    </VeltCommentThreadWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-thread-wireframe>
        <velt-comment-dialog-wireframe></velt-comment-dialog-wireframe>
    </velt-comment-thread-wireframe>
    ```
  </Tab>
</Tabs>

### VeltCommentDialogWireframe

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-thread shadow-dom="false"></velt-comment-thread>
    ```
  </Tab>
</Tabs>

### Dark Mode

<img src="https://mintcdn.com/velt/kAkMSIYF4ZlrlwLm/images/dark-light-mode.png?fit=max&auto=format&n=kAkMSIYF4ZlrlwLm&q=85&s=5fbc0452bff061cfdf17b8296c1a50d0" alt="" width="1280" height="720" data-path="images/dark-light-mode.png" />

`Default: false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltCommentThread darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-thread dark-mode="true"></velt-comment-thread>
    ```
  </Tab>
</Tabs>

### 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](/ui-customization/layout#variants).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentThread 
      variant="component-variant" 
      dialogVariant="dialog-variant"
    />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-thread 
      dialog-variant="dialog-variant"
      variant="component-variant"
    ></velt-comment-thread> 
    ```
  </Tab>
</Tabs>