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

​
VeltInlineCommentsSectionWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe>
        <VeltInlineCommentsSectionWireframe.Skeleton />
        <VeltInlineCommentsSectionWireframe.Panel />
    </VeltInlineCommentsSectionWireframe>
</VeltWireframe>

​
Skeleton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.Skeleton />
</VeltWireframe>

​
Panel

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.Panel>
        <VeltInlineCommentsSectionWireframe.ComposerContainer />
        <VeltInlineCommentsSectionWireframe.SortingDropdown />
        <VeltInlineCommentsSectionWireframe.FilterDropdown />
        <VeltInlineCommentsSectionWireframe.CommentCount />
        <VeltInlineCommentsSectionWireframe.List />
    </VeltInlineCommentsSectionWireframe.Panel>
</VeltWireframe>

​
ComposerContainer

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.ComposerContainer>
        <VeltCommentDialogWireframe.Composer />
    </VeltInlineCommentsSectionWireframe.ComposerContainer>
</VeltWireframe>
VeltCommentDialogWireframe.Composer
You can find the wireframe for the Comment Dialog Composer here.

​
SortingDropdown

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger />
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content />
    </VeltInlineCommentsSectionWireframe.SortingDropdown>
</VeltWireframe>
Trigger
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
</VeltWireframe>
Name
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
</VeltWireframe>
Icon
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltWireframe>
Content
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
        <VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item />
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
</VeltWireframe>
Item
  • React / Next.js
  • Other Frameworks
<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>

​
FilterDropdown (Panel)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger />
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content />
    </VeltInlineCommentsSectionWireframe.FilterDropdown>
</VeltWireframe>
Trigger (Panel FilterDropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Arrow />
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Name />
    </VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger>
</VeltWireframe>
Arrow (Panel FilterDropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Arrow />
</VeltWireframe>
Name (Panel FilterDropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger.Name />
</VeltWireframe>
Content (Panel FilterDropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List />
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.ApplyButton />
    </VeltInlineCommentsSectionWireframe.FilterDropdown.Content>
</VeltWireframe>
List (Panel FilterDropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item />
    </VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List>
</VeltWireframe>
Item (Panel FilterDropdown Content List)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item>
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Label />
        <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Checkbox />
    </VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item>
</VeltWireframe>
Label (Panel FilterDropdown Content List Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Label />
</VeltWireframe>
Checkbox (Panel FilterDropdown Content List Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.List.Item.Checkbox />
</VeltWireframe>
ApplyButton (Panel FilterDropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.FilterDropdown.Content.ApplyButton />
</VeltWireframe>

​
CommentCount

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltInlineCommentsSectionWireframe.CommentCount />
</VeltWireframe>

​
List

  • React / Next.js
  • Other Frameworks
<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
  • Other Frameworks
React / Next.js
<VeltInlineCommentsSection
	dialogVariant="dialog-variant-name"
    variant="inline-comment-section-variant-name"
    composerVariant="inline"
/>
⌘I