We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
VeltInlineCommentsSectionWireframe

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe>
        <VeltInlineCommentsSectionWireframe.Skeleton />
        <VeltInlineCommentsSectionWireframe.Panel />
    </VeltInlineCommentsSectionWireframe>
</VeltWireframe>

​
Skeleton

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.Skeleton />
</VeltWireframe>

​
Panel

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.Panel>
        <VeltInlineCommentsSectionWireframe.ComposerContainer />
        <VeltInlineCommentsSectionWireframe.SortingDropdown />
        <VeltInlineCommentsSectionWireframe.CommentCount />
        <VeltInlineCommentsSectionWireframe.List />
    </VeltInlineCommentsSectionWireframe.Panel>
</VeltWireframe>

​
ComposerContainer

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.ComposerContainer>
        <VeltCommentDialogWireframe.Composer />
    </VeltInlineCommentsSectionWireframe.ComposerContainer>
</VeltWireframe>
VeltCommentDialogWireframe.Composer
You can find the wireframe for the Comment Dialog Composer here.

​
SortingDropdown

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger />
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content />
    </VeltInlineCommentsSectionWireframe.SortingDropdown>
</VeltWireframe>
Trigger
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
</VeltWireframe>
Name
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
</VeltWireframe>
Icon
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltWireframe>
Content
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item />
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
</VeltWireframe>
Item
<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>

​
CommentCount

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.CommentCount />
</VeltWireframe>

​
List

<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.List>
        <VeltCommentDialogWireframe />
    </VeltInlineCommentsSectionWireframe.List>
</VeltWireframe>
VeltCommentDialogWireframe
You can find the wireframe for the Comment Dialog here.

​
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.
Learn more about Variants here
React / Next.js
<VeltInlineCommentsSection
	dialogVariant="dialog-variant-name"
    variant="inline-comment-section-variant-name"
    composerVariant="inline"
/>