> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# MultiThread Comment Dialog Wireframes

> Wireframe components for building custom MultiThread Comment Dialog interfaces with maximum flexibility.

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

## VeltMultiThreadCommentDialogWireframe

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-overview.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=ddb701e4e1bde950dd5d6c785e6ff129" alt="" width="1280" height="650" data-path="images/customization/comments/multi-thread/multi-thread-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMultiThreadCommentDialogWireframe>
            <VeltMultiThreadCommentDialogWireframe.CommentCount />
            <VeltMultiThreadCommentDialogWireframe.MinimalFilterDropdown />
            <VeltMultiThreadCommentDialogWireframe.MinimalActionsDropdown />
            <VeltMultiThreadCommentDialogWireframe.NewThreadButton />
            <VeltMultiThreadCommentDialogWireframe.CloseButton />
            <VeltMultiThreadCommentDialogWireframe.List />
            <VeltMultiThreadCommentDialogWireframe.ResetFilterButton />
            <VeltMultiThreadCommentDialogWireframe.ComposerContainer />
        </VeltMultiThreadCommentDialogWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-wireframe>
            <velt-multi-thread-comment-dialog-comment-count-wireframe></velt-multi-thread-comment-dialog-comment-count-wireframe>
            <velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe></velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe>
            <velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe></velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe>
            <velt-multi-thread-comment-dialog-new-thread-button-wireframe></velt-multi-thread-comment-dialog-new-thread-button-wireframe>
            <velt-multi-thread-comment-dialog-close-button-wireframe></velt-multi-thread-comment-dialog-close-button-wireframe>
            <velt-multi-thread-comment-dialog-list-wireframe></velt-multi-thread-comment-dialog-list-wireframe>
            <velt-multi-thread-comment-dialog-reset-filter-button-wireframe></velt-multi-thread-comment-dialog-reset-filter-button-wireframe>
            <velt-multi-thread-comment-dialog-composer-container-wireframe></velt-multi-thread-comment-dialog-composer-container-wireframe>
        </velt-multi-thread-comment-dialog-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## CommentCount

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-comments-count.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=b2b2e462829b42b1cfe6fa2d19e009b0" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-comments-count.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-comment-count-wireframe></velt-multi-thread-comment-dialog-comment-count-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## MinimalFilterDropdown

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-filter-dropdown.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=a59d2beaa93750a33127057ea77380b8" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-filter-dropdown.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe></velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## MinimalActionsDropdown

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-actions.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=4667a4195decc97b25ed7015eca6f3d4" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-actions.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe></velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## NewThreadButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-new-thread.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=9789e0dfaaa01407dc509720e3123d02" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-new-thread.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-new-thread-button-wireframe></velt-multi-thread-comment-dialog-new-thread-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## CloseButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-close.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=2f16db8b4c35ad94baf4d1d0032d88f0" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-close.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-close-button-wireframe></velt-multi-thread-comment-dialog-close-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## List

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-list.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=0dcda5cfba36add5fd8f203ac44da857" alt="" width="1280" height="650" data-path="images/customization/comments/multi-thread/multi-thread-list.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-list-wireframe></velt-multi-thread-comment-dialog-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## ResetFilterButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-reset-filter.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=fcc97dced996f0376e6048724559f0cd" alt="" width="1280" height="650" data-path="images/customization/comments/multi-thread/multi-thread-reset-filter.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-reset-filter-button-wireframe></velt-multi-thread-comment-dialog-reset-filter-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## ComposerContainer

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/SiOz58wKtI7dZ3a0/images/customization/comments/multi-thread/multi-thread-composer.png?fit=max&auto=format&n=SiOz58wKtI7dZ3a0&q=85&s=08f3df4a84c9df1e1160a6ddabc1518d" alt="" width="1280" height="362" data-path="images/customization/comments/multi-thread/multi-thread-composer.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-multi-thread-comment-dialog-composer-container-wireframe></velt-multi-thread-comment-dialog-composer-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
