> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-40d8baa1.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-mintlify-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-overview.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=efe30a0150d5e35293106e7039daf2da" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-comments-count.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=ee34cf9c72e661c8bf61c8f696bcc4aa" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-filter-dropdown.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=7cbdaf3ca09f55d69f45e5b798287f35" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-actions.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=3067fc4a5470f7edf450c402b156b0a7" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-new-thread.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=90e3bae504446039b9826c6ec8e6dc10" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-close.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=4c646f4c33887950d448d6bb76b625bf" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-list.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=909c871e62a8a08c7ca5cd8493adde9b" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-reset-filter.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=bcf2dd0250f66996303381fa1ab7f20b" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/multi-thread/multi-thread-composer.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=ee128591a544e7cb68b5ce77da0583cf" 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>
