> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Inline Comments Section Wireframes

> Wireframe components for building custom Inline Comments Section 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>

## VeltInlineCommentsSectionWireframe

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-overview.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=35e0f9d5a19faa93139108a84d6790a4" alt="" width="1280" height="650" data-path="images/customization/comments/inline-comments/inline-comments-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe>
            <VeltInlineCommentsSectionWireframe.Skeleton />
            <VeltInlineCommentsSectionWireframe.Panel />
        </VeltInlineCommentsSectionWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-wireframe>
            <velt-inline-comments-section-skeleton-wireframe></velt-inline-comments-section-skeleton-wireframe>
            <velt-inline-comments-section-panel-wireframe></velt-inline-comments-section-panel-wireframe>
        </velt-inline-comments-section-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Skeleton

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-skeleton.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=79861b7b0bbd3b403175116467433def" alt="" width="1280" height="650" data-path="images/customization/comments/inline-comments/inline-comments-skeleton.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-skeleton-wireframe></velt-inline-comments-section-skeleton-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Panel

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-panel.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=8e31b9c758c673845bdd2bd61deb6cec" alt="" width="1280" height="650" data-path="images/customization/comments/inline-comments/inline-comments-panel.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.Panel>
            <VeltInlineCommentsSectionWireframe.ComposerContainer />
            <VeltInlineCommentsSectionWireframe.SortingDropdown />
            <VeltInlineCommentsSectionWireframe.FilterDropdown />
            <VeltInlineCommentsSectionWireframe.CommentCount />
            <VeltInlineCommentsSectionWireframe.List />
        </VeltInlineCommentsSectionWireframe.Panel>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-panel-wireframe>
            <velt-inline-comments-section-composer-container-wireframe></velt-inline-comments-section-composer-container-wireframe>
            <velt-inline-comments-section-sorting-dropdown-wireframe></velt-inline-comments-section-sorting-dropdown-wireframe>
            <velt-inline-comments-section-filter-dropdown-wireframe></velt-inline-comments-section-filter-dropdown-wireframe>
            <velt-inline-comments-section-comment-count-wireframe></velt-inline-comments-section-comment-count-wireframe>
            <velt-inline-comments-section-list-wireframe></velt-inline-comments-section-list-wireframe>
        </velt-inline-comments-section-panel-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### ComposerContainer

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-panel-composer.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=20a5071cee230d27796f84d332e758b5" alt="" width="1280" height="300" data-path="images/customization/comments/inline-comments/inline-comments-panel-composer.png" />

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

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

##### **VeltCommentDialogWireframe.Composer**

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

#### SortingDropdown

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-panel-sorting-dropdown.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=a1ce6e9492462b37d102a779d04b4508" alt="" width="1280" height="424" data-path="images/customization/comments/inline-comments/inline-comments-panel-sorting-dropdown.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown>
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger />
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Content />
        </VeltInlineCommentsSectionWireframe.SortingDropdown>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-wireframe>
            <velt-inline-comments-section-sorting-dropdown-trigger-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
            <velt-inline-comments-section-sorting-dropdown-content-wireframe></velt-inline-comments-section-sorting-dropdown-content-wireframe>
        </velt-inline-comments-section-sorting-dropdown-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Trigger**

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=9fe2e305cb133e3ee1051726b8812d97" alt="" width="1280" height="300" data-path="images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
        </VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
            <velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>
            <velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>
        </velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Name**

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-name.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=d634d0ed7db2965f40800b8074d5fc1b" alt="" width="1280" height="300" data-path="images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Icon**

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-icon.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=0eb88937801b6230fc9df24b261da4f7" alt="" width="1280" height="300" data-path="images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Content**

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=1a3e529e77b7fd8bf414183e453fa703" alt="" width="1280" height="360" data-path="images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item />
        </VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-content-wireframe>
            <velt-inline-comments-section-sorting-dropdown-content-item-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
        </velt-inline-comments-section-sorting-dropdown-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Item**

<img src="https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content-item.png?fit=max&auto=format&n=y_bUi9B-cnWLxN8L&q=85&s=52554090ee49a13f3312ea9d722dffa4" alt="" width="1280" height="360" data-path="images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Icon />
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Tick />
            <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Name />
        </VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
            <velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe>
            <velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe>
            <velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe>
        </velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### FilterDropdown (Panel)

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown>
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger />
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Content />
        </VeltInlineCommentsSectionWireframe.FilterDropdown>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-wireframe>
            <velt-inline-comments-section-filter-dropdown-trigger-wireframe></velt-inline-comments-section-filter-dropdown-trigger-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-wireframe></velt-inline-comments-section-filter-dropdown-content-wireframe>
        </velt-inline-comments-section-filter-dropdown-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Trigger (Panel FilterDropdown)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger>
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Arrow />
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Name />
        </VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-trigger-wireframe>
            <velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe></velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe>
            <velt-inline-comments-section-filter-dropdown-trigger-name-wireframe></velt-inline-comments-section-filter-dropdown-trigger-name-wireframe>
        </velt-inline-comments-section-filter-dropdown-trigger-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Arrow (Panel FilterDropdown Trigger)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Arrow />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe></velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Name (Panel FilterDropdown Trigger)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-trigger-name-wireframe></velt-inline-comments-section-filter-dropdown-trigger-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Content (Panel FilterDropdown)**

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-list-wireframe></velt-inline-comments-section-filter-dropdown-content-list-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe></velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe>
        </velt-inline-comments-section-filter-dropdown-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **List (Panel FilterDropdown Content)**

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-list-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-list-item-wireframe></velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>
        </velt-inline-comments-section-filter-dropdown-content-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Item (Panel FilterDropdown Content List)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item>
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Label />
            <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Checkbox />
        </VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe></velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe>
            <velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe></velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe>
        </velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Label (Panel FilterDropdown Content List Item)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe></velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Checkbox (Panel FilterDropdown Content List Item)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Checkbox />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe></velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **ApplyButton (Panel FilterDropdown Content)**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.ApplyButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe></velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CommentCount

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-panel-comment-count.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=d013a17f52f6882c7f26fd6e0141d912" alt="" width="1280" height="424" data-path="images/customization/comments/inline-comments/inline-comments-panel-comment-count.png" />

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

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

#### List

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/customization/comments/inline-comments/inline-comments-panel-list.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=50ebf035d3241b11e48af3319494e30d" alt="" width="1280" height="569" data-path="images/customization/comments/inline-comments/inline-comments-panel-list.png" />

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

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

##### **VeltCommentDialogWireframe**

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

## Pre-defined Variants

Here are the pre-deinfed variants:

1. `dialog-variant`: Use this to customize the `Comment Dialog` that appears within the `Inline Comments Section` component.
2. `variant`: Use this to customize the entire `Inline Comments Section` component itself.
3. `composer-variant`: Use this to customize the main Composer that appears within the `Inline Comments Section` component.

<Info>
  Learn more about Variants [here](/ui-customization/layout#variants)
</Info>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx React / Next.js theme={null}
    <VeltInlineCommentsSection
    	dialogVariant="dialog-variant-name"
        variant="inline-comment-section-variant-name"
        composerVariant="inline"
    />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```HTML theme={null}
    <velt-inline-comments-section
        dialog-variant="dialog-variant-name"
        variant="inline-comment-section-variant-name"
        composer-variant="inline"
    >
    </velt-inline-comments-section>
    ```
  </Tab>
</Tabs>
