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

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe>
        <VeltCommentDialogWireframe.GhostBanner />
        <VeltCommentDialogWireframe.PrivateBanner />
        <VeltCommentDialogWireframe.AssigneeBanner />
        <VeltCommentDialogWireframe.Header />
        <VeltCommentDialogWireframe.PrivateBadge />
        <VeltCommentDialogWireframe.Body />
        <VeltCommentDialogWireframe.Composer />
        <VeltCommentDialogWireframe.AllComment />
        <VeltCommentDialogWireframe.Approve />
        <VeltCommentDialogWireframe.SignIn />
        <VeltCommentDialogWireframe.Upgrade />
        <VeltCommentDialogWireframe.SuggestionAction />
    </VeltCommentDialogWireframe>
</VeltWireframe>

​
Ghost Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.GhostBanner />
</VeltWireframe>

​
Private Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBanner />
</VeltWireframe>

​
Assignee Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner>
        <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
        <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
        <VeltCommentDialogWireframe.AssigneeBanner.UserName />
    </VeltCommentDialogWireframe.AssigneeBanner>
</VeltWireframe>

​
Resolve Button (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
</VeltWireframe>

​
User Avatar (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
</VeltWireframe>

​
User Name (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserName />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        // Pin Dialog Header
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown>

        // Sidebar Dialog Header
        <VeltCommentDialogWireframe.CommentIndex />
        <VeltCommentDialogWireframe.CommentNumber />
        <VeltCommentDialogWireframe.CommentCategory />
        <VeltCommentDialogWireframe.CommentSuggestionStatus />
        <VeltCommentDialogWireframe.NavigationButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
Status (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status>
        <VeltCommentDialogWireframe.Status.Trigger />
        <VeltCommentDialogWireframe.Status.Content />
    </VeltCommentDialogWireframe.Status>
</VeltWireframe>

​
Trigger (Header Status)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger>
        <VeltCommentDialogWireframe.Status.Trigger.Icon />
        <VeltCommentDialogWireframe.Status.Trigger.Name />
        <VeltCommentDialogWireframe.Status.Trigger.Arrow />
    </VeltCommentDialogWireframe.Status.Trigger>
</VeltWireframe>
Icon (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Icon />
</VeltWireframe>
Name (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Name />
</VeltWireframe>
Arrow (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Status)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content>
        <VeltCommentDialogWireframe.Status.Content.Item />
    </VeltCommentDialogWireframe.Status.Content>
</VeltWireframe>
Item (Header Status Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item>
        <VeltCommentDialogWireframe.Status.Content.Item.Icon />
        <VeltCommentDialogWireframe.Status.Content.Item.Name />
    </VeltCommentDialogWireframe.Status.Content.Item>
</VeltWireframe>
Icon (Header Status Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Icon />
</VeltWireframe>
Name (Header Status Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Name />
</VeltWireframe>

​
Priority (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority>
        <VeltCommentDialogWireframe.Priority.Trigger />
        <VeltCommentDialogWireframe.Priority.Content />
    </VeltCommentDialogWireframe.Priority>
</VeltWireframe>

​
Trigger (Header Priority)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger>
        <VeltCommentDialogWireframe.Priority.Trigger.Icon />
        <VeltCommentDialogWireframe.Priority.Trigger.Name />
        <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
    </VeltCommentDialogWireframe.Priority.Trigger>
</VeltWireframe>
Icon (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Icon />
</VeltWireframe>
Name (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Name />
</VeltWireframe>
Arrow (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Priority)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content>
        <VeltCommentDialogWireframe.Priority.Content.Item />
    </VeltCommentDialogWireframe.Priority.Content>
</VeltWireframe>
Item (Header Priority Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item>
        <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
        <VeltCommentDialogWireframe.Priority.Content.Item.Name />
        <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
    </VeltCommentDialogWireframe.Priority.Content.Item>
</VeltWireframe>
Icon (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
</VeltWireframe>
Name (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Name />
</VeltWireframe>
Tick (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
</VeltWireframe>

​
Options (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options>
        <VeltCommentDialogWireframe.Options.Trigger />
        <VeltCommentDialogWireframe.Options.Content />
    </VeltCommentDialogWireframe.Options>
</VeltWireframe>

​
Trigger (Header Options)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Trigger />
</VeltWireframe>

​
Content (Header Options)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate />
        <VeltCommentDialogWireframe.Options.Content.Assign />
        <VeltCommentDialogWireframe.Options.Content.Edit />
        <VeltCommentDialogWireframe.Options.Content.Delete />
        <VeltCommentDialogWireframe.Options.Content.Notification />
    </VeltCommentDialogWireframe.Options.Content>
</VeltWireframe>
Make Private (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
    </VeltCommentDialogWireframe.Options.Content.MakePrivate>
</VeltWireframe>
Enable (Header Options Content Make Private)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
</VeltWireframe>
Disable (Header Options Content Make Private)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
</VeltWireframe>
Assign (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Assign />
</VeltWireframe>
Edit (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Edit />
</VeltWireframe>
Delete (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete>
        <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.Options.Content.Delete>
</VeltWireframe>
Thread (Header Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Header Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
</VeltWireframe>
Notification (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification>
        <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
        <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
    </VeltCommentDialogWireframe.Options.Content.Notification>
</VeltWireframe>
Subscribe (Header Options Content Notification)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
</VeltWireframe>
Unsubscribe (Header Options Content Notification)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CopyLink />
</VeltWireframe>

​
Resolve Button (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ResolveButton />
</VeltWireframe>

​
Custom Annotation Dropdown (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown>
</VeltWireframe>

​
Trigger (Header Custom Annotation Dropdown)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
</VeltWireframe>
List (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Trigger List)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
</VeltWireframe>
Remaining Count (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
</VeltWireframe>
Placeholder (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
</VeltWireframe>
Arrow (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Custom Annotation Dropdown)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
</VeltWireframe>
Label (Header Custom Annotation Dropdown Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
</VeltWireframe>
Icon (Header Custom Annotation Dropdown Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
</VeltWireframe>

​
Comment Index (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentIndex />
</VeltWireframe>

​
Comment Number (Header)

The annotation number displays in the comment dialog header, providing a persistent identifier for each comment that remains constant across sessions. This number makes it easy to reference specific comments in team discussions or documentation.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentNumber />
</VeltWireframe>

​
Comment Category (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentCategory />
</VeltWireframe>

​
Comment Suggestion Status (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentSuggestionStatus />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.NavigationButton />
</VeltWireframe>

​
Private Badge

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBadge />
</VeltWireframe>

​
Body

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Body>
        <VeltCommentDialogWireframe.Threads />
        <VeltCommentDialogWireframe.ToggleReply />
        <VeltCommentDialogWireframe.HideReply />
        <VeltCommentDialogWireframe.ReplyAvatars />
    </VeltCommentDialogWireframe.Body>
</VeltWireframe>

​
Threads (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Threads>
        <VeltCommentDialogWireframe.ThreadCard />
        <VeltCommentDialogWireframe.MoreReply />
    </VeltCommentDialogWireframe.Threads>
</VeltWireframe>

​
Thread Card (Body Threads)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard>
        <VeltCommentDialogWireframe.ThreadCard.Avatar />
        <VeltCommentDialogWireframe.ThreadCard.Name />
        <VeltCommentDialogWireframe.ThreadCard.Time />
        <VeltCommentDialogWireframe.ThreadCard.Unread />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown />
        <VeltCommentDialogWireframe.ThreadCard.Edited />
        <VeltCommentDialogWireframe.ThreadCard.DeviceType />
        <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
        <VeltCommentDialogWireframe.ThreadCard.Options />
        <VeltCommentDialogWireframe.ThreadCard.Message />
        <VeltCommentDialogWireframe.ThreadCard.Reactions />
        <VeltCommentDialogWireframe.ThreadCard.Attachments />
        <VeltCommentDialogWireframe.ThreadCard.Recordings />
        <VeltCommentDialogWireframe.ThreadCard.Reply />
        <VeltReactionToolWireframe />
        <VeltReactionPinWireframe />
        <VeltReactionsPanelWireframe />
        <VeltReactionPinTooltipWireframe />
        <VeltAutocompleteChipTooltipWireframe />
    </VeltCommentDialogWireframe.ThreadCard>
</VeltWireframe>
Avatar (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Name />
</VeltWireframe>
Unread (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Unread />
</VeltWireframe>
Seen Dropdown (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
</VeltWireframe>
Trigger (Body Threads Thread Card Seen Dropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Seen Dropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
</VeltWireframe>
Title (Body Threads Thread Card Seen Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
</VeltWireframe>
Items (Body Threads Thread Card Seen Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
</VeltWireframe>
Item (Body Threads Thread Card Seen Dropdown Content Items)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
</VeltWireframe>
Time (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
</VeltWireframe>
Name (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
</VeltWireframe>
Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
</VeltWireframe>
Time (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Time />
</VeltWireframe>
Device Type (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
</VeltWireframe>
Edited (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Edited />
</VeltWireframe>
Options (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options>
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content />
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>
Trigger (Body Threads Thread Card Options)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Options)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content>
</VeltWireframe>
Edit (Body Threads Thread Card Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
</VeltWireframe>
Delete (Body Threads Thread Card Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
</VeltWireframe>
Thread (Body Threads Thread Card Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Body Threads Thread Card Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
</VeltWireframe>
Message (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
</VeltWireframe>
Reactions (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reactions />
</VeltWireframe>
Attachments (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other />
    </VeltCommentDialogWireframe.ThreadCard.Attachments>
</VeltWireframe>
Image (Body Threads Thread Card Attachments)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
</VeltWireframe>
Preview (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
</VeltWireframe>
Other (Body Threads Thread Card Attachments)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
</VeltWireframe>
Icon (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
</VeltWireframe>
Size (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
</VeltWireframe>
Recordings (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Recordings />
</VeltWireframe>
Autocomplete Chip Tooltip (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe>
        <VeltAutocompleteChipTooltipWireframe.Icon />
        <VeltAutocompleteChipTooltipWireframe.Name />
        <VeltAutocompleteChipTooltipWireframe.Description />
    </VeltAutocompleteChipTooltipWireframe>
</VeltWireframe>
Icon (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Name />
</VeltWireframe>
Description (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Description />
</VeltWireframe>
Reactions Panel (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe>
        <VeltReactionsPanelWireframe.Items />
    </VeltReactionsPanelWireframe>
</VeltWireframe>
Items (Body Threads Thread Card Reactions Panel)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items>
        <VeltReactionsPanelWireframe.Items.Item />
    </VeltReactionsPanelWireframe.Items>
</VeltWireframe>
Item (Body Threads Thread Card Reactions Panel Items)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item>
        <VeltReactionsPanelWireframe.Items.Item.Emoji />
    </VeltReactionsPanelWireframe.Items.Item>
</VeltWireframe>
Emoji (Body Threads Thread Card Reactions Panel Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item.Emoji />
</VeltWireframe>
Reaction Pin (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe>
        <VeltReactionPinWireframe.Emoji />
        <VeltReactionPinWireframe.Count />
    </VeltReactionPinWireframe>
</VeltWireframe>
Emoji (Body Threads Thread Card Reaction Pin)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe.Emoji />
</VeltWireframe>
Count (Body Threads Thread Card Reaction Pin)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe.Count />
</VeltWireframe>
Reaction Pin Tooltip (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe>
        <VeltReactionPinTooltipWireframe.Users />
    </VeltReactionPinTooltipWireframe>
</VeltWireframe>
Users (Body Threads Thread Card Reaction Pin Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users>
        <VeltReactionPinTooltipWireframe.Users.User />
    </VeltReactionPinTooltipWireframe.Users>
</VeltWireframe>
User (Body Threads Thread Card Reaction Pin Tooltip Users)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User>
        <VeltReactionPinTooltipWireframe.Users.User.Avatar />
        <VeltReactionPinTooltipWireframe.Users.User.Name />
    </VeltReactionPinTooltipWireframe.Users.User>
</VeltWireframe>
Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card Reaction Pin Tooltip Users User)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Name />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionToolWireframe>
        {/* Your custom element */}
    </VeltReactionToolWireframe>
</VeltWireframe>
Reply (Body Threads Thread Card)
The Reply component provides a quick reply button on each comment thread card, enabling users to respond directly without expanding the full comment dialog. This streamlines the commenting workflow in collaborative environments. This button is hidden by default and can be enabled through wireframe customization.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reply />
</VeltWireframe>

​
MoreReply (Body Threads)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.MoreReply />
</VeltWireframe>

​
Reply Avatars (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars>
        <VeltCommentDialogWireframe.ReplyAvatars.List />
        <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
    </VeltCommentDialogWireframe.ReplyAvatars>
</VeltWireframe>

​
List (Body Reply Avatars)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List>
        <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
    </VeltCommentDialogWireframe.ReplyAvatars.List>
</VeltWireframe>
Item (Body Reply Avatars List)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
</VeltWireframe>

​
Remaining Count (Body Reply Avatars)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
</VeltWireframe>

​
Toggle Reply (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply>
        <VeltCommentDialogWireframe.ToggleReply.Icon />
        <VeltCommentDialogWireframe.ToggleReply.Count />
        <VeltCommentDialogWireframe.ToggleReply.Text />
    </VeltCommentDialogWireframe.ToggleReply>
</VeltWireframe>

​
Icon (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Icon />
</VeltWireframe>

​
Count (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Count />
</VeltWireframe>

​
Text (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Text />
</VeltWireframe>

​
Hide Reply (Body)

The Hide Reply component adds a button to hide replies in the comment dialog, letting you control when replies are visible to match your workflow.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.HideReply />
</VeltWireframe>

​
Composer

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.Avatar />
        <VeltCommentDialogWireframe.Composer.Input />
        <VeltCommentDialogWireframe.Composer.Attachments />
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
        <VeltAutocompleteOptionWireframe />
        <VeltAutocompleteGroupOptionWireframe />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>

​
Avatar (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Avatar />
</VeltWireframe>

​
Attachments (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid />
    </VeltCommentDialogWireframe.Composer.Attachments>
</VeltWireframe>

​
Selected (Composer Attachments)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected>
</VeltWireframe>
Image (Composer Attachments Selected)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Loading />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
</VeltWireframe>
Other (Composer Attachments Selected)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Loading />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Icon />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Name />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Size />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
</VeltWireframe>

​
Invalid (Composer Attachments)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid>
</VeltWireframe>
Item (Composer Attachments Invalid)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Message />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Delete />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
</VeltWireframe>

​
Recordings (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Recordings />
</VeltWireframe>

​
Input (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Input />
</VeltWireframe>

​
Action Button (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
</VeltWireframe>

​
Assign User (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.AssignUser />
</VeltWireframe>

​
Autocomplete Option (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe>
        <VeltAutocompleteOptionWireframe.Icon />
        <VeltAutocompleteOptionWireframe.Name />
        <VeltAutocompleteOptionWireframe.Description field='name' />
        <VeltAutocompleteOptionWireframe.ErrorIcon />
    </VeltAutocompleteOptionWireframe>
</VeltWireframe>

​
Icon (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Icon />
</VeltWireframe>

​
Name (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Name />
</VeltWireframe>

​
Description (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Description field='name' />
</VeltWireframe>

​
Error Icon (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.ErrorIcon />
</VeltWireframe>

​
Autocomplete Group Option (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteGroupOptionWireframe />
</VeltWireframe>

​
All Comment

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AllComment />
</VeltWireframe>

​
Approve

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Approve />
</VeltWireframe>

​
Sign In

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SignIn />
</VeltWireframe>

​
Upgrade

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Upgrade />
</VeltWireframe>

​
Suggestion Action

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction>
        <VeltCommentDialogWireframe.SuggestionAction.Accept />
        <VeltCommentDialogWireframe.SuggestionAction.Reject />
    </VeltCommentDialogWireframe.SuggestionAction>
</VeltWireframe>

​
Accept (Suggestion Action)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Accept />
</VeltWireframe>

​
Reject (Suggestion Action)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Reject />
</VeltWireframe>

​
Styling

​
Disable ShadowDOM

  • By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
  • Disable the shadow dom to apply your custom CSS to the component.
Default: true
  • React / Next.js
  • Other Frameworks
Example
<VeltComments dialogShadowDom={false} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();

​
Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false Below are the examples to enable Dark Mode for comments dialog:
  • React / Next.js
  • Other Frameworks
Example
<VeltComments dialogDarkMode={true}/>
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

​
Pre-defined Variants

The Comment Dialog has 2 pre-defined variants:
  • dialog: this will customize the Comment Dialog only within Pin, Area, and Text Comments
  • sidebar: this will customize the Comment Dialog only within Sidebar comments
To use them, set the variant name in the wireframe template equal to one of the pre-defined variants. You do not need to add it to the actual Velt component.
  • React / Next.js
  • Other Frameworks
React / Next.js
 <VeltWireframe>
    {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
    <VeltCommentDialogWireframe variant="dialog">
        ...
    </VeltCommentDialogWireframe>

    {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
    <VeltCommentDialogWireframe variant="sidebar">
        ...
    </VeltCommentDialogWireframe>

    {/* If you dont use any variants, then customization will be applied to the Comment Dialog globally */}
    <VeltCommentDialogWireframe>
        ...
    </VeltCommentDialogWireframe>
</VeltWireframe>
⌘I