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

# MultiThread Comment Dialog Wireframes

> Wireframe components for building custom Multithread Comment Dialog UIs — override the thread list, active thread, and replies 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>

## VeltMultiThreadCommentDialogWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-overview.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=764afea420b99220414a37a577e1974a" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-comments-count.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=6a7db6d59179a966e7aea7dbf4467767" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-filter-dropdown.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=d41e4f65978726af18233a9c32d9beac" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-actions.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=8ebcdb31806f8b5e6052db57fb7d676a" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-new-thread.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=56ae3958ce679987ae0b92371873c15b" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-close.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=19af822a6a3b538c6b9c9d4c336a8932" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-list.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=0ba72c74b10f3e1239c75d2412a2e0a2" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-reset-filter.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=4b5f7576d3d33e57cc41ed5e1bdc1e13" 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-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/multi-thread/multi-thread-composer.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=b444c91f02f14247ef422cf96f4b04ce" 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>
