> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-5.mintlify.site/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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-overview.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=46bda52629990724dea9d68615d4efbd" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-skeleton.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=e71d5a68d00c41635978f568bffea446" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=40e2f5d81c48861a513212d34b97de08" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-composer.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=e5f99f903ec4dcd0038277fe4f5f26cb" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-sorting-dropdown.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=e20a9a37dded8b8ca8cb79a8c3ea3106" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=4ea21b3801a1f79bb31892dde2c4e38d" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-name.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=67ec02e6e22689a54327512a8c61a8e3" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-sorting-trigger-icon.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=ea113c17471e5e344e20dccf5c93d12b" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=22c2400eff8babf7cc37c6317d76267a" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-trigger-dropdown-content-item.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=e63c1bbfe3c2fa216ba2829cfe30c634" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-comment-count.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=d81ce65c152fb36b0022e962440528d5" 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-v6-0-0-beta-5/QT5LTAArt9Ybli0M/images/customization/comments/inline-comments/inline-comments-panel-list.png?fit=max&auto=format&n=QT5LTAArt9Ybli0M&q=85&s=e9a1025f310b6c9dd8e8f61e81328cc6" 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>
