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

​
Overview

​
Skeleton

​
Panel

​
Header (Panel)

​
FullscreenButton (Panel Header)

Button to toggle full-screen mode for the Comments Sidebar. This component only appears when full-screen mode is enabled via the fullScreen prop or API method. Clicking it allows users to expand the sidebar to fill the entire viewport or return to normal mode.

​
CloseButton (Panel Header)

​
Search (Panel Header)

​
ResetFilterButton (Panel Header)

​
Status (Panel Header)

Trigger (Panel Header Status)
Name (Panel Header Status Trigger)
Arrow (Panel Header Status Trigger)
Indicator (Panel Header Status Trigger)
Content (Panel Header Status)
Item (Panel Header Status Content)
Icon (Panel Header Status Content Item)
Name (Panel Header Status Content Item)
Count (Panel Header Status Content Item)
Checkbox (Panel Header Status Content Item)
Checked (Panel Header Status Content Item Checkbox)
Unchecked (Panel Header Status Content Item Checkbox)

​
LocationFilterDropdown (Panel Header)

Trigger (Panel Header LocationFilterDropdown)
Label (Panel Header LocationFilterDropdown Trigger)
Content (Panel Header LocationFilterDropdown)

​
MinimalFilterDropdown (Panel Header)

Trigger (Panel Header MinimalFilterDropdown)
Content (Panel Header MinimalFilterDropdown)
SortDate (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)
SortUnread (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)
FilterAll (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)
FilterUnread (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)
FilterRead (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)
FilterResolved (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)
FilterOpen (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterOpen)
FilterReset (Panel Header MinimalFilterDropdown Content)
SelectedIcon (Panel Header MinimalFilterDropdown Content FilterReset)

​
MinimalActionsDropdown (Panel Header)

Trigger (Panel Header MinimalActionsDropdown)
Content (Panel Header MinimalActionsDropdown)
MarkAllRead (Panel Header MinimalActionsDropdown Content)
MarkAllResolved (Panel Header MinimalActionsDropdown Content)

​
DocumentFilterDropdown (Panel Header)

Trigger (Panel Header DocumentFilterDropdown)
Content (Panel Header DocumentFilterDropdown)
Document (Panel Header DocumentFilterDropdown Content)

​
FilterButton (Panel Header)

​
Filter (Panel)

​
Title (Panel Filter)

​
CloseButton (Panel Filter)

​
Location (Panel Filter)

Location filter component in the comments sidebar panel filter
Name (Panel Filter Location)
Name component within the location filter
Search (Panel Filter Location)
Search component within the location filter
Tags (Panel Filter Location Search)
Tags component within the location filter search
Item (Panel Filter Location Search Tags)
Item component within the location filter search tags
HiddenCount (Panel Filter Location Search)
Hidden count component within the location filter search
Input (Panel Filter Location Search)
Input component within the location filter search
DropdownIcon (Panel Filter Location Search)
Dropdown icon component within the location filter search
Item (Panel Filter Location)
Item component within the location filter
Checkbox (Panel Filter Location Item)
Checkbox component within the location filter item
Checked (Panel Filter Location Item Checkbox)
Unchecked (Panel Filter Location Item Checkbox)
Name (Panel Filter Location Item)
Name component within the location filter item
Count (Panel Filter Location Item)
Count component within the location filter item
ViewAll (Panel Filter Location)
View all component within the location filter

​
Document (Panel Filter)

Document filter component in the comments sidebar panel filter
Name (Panel Filter Document)
Name component within the document filter
Search (Panel Filter Document)
Search component within the document filter
Tags (Panel Filter Document Search)
Tags component within the document filter search
Item (Panel Filter Document Search Tags)
Item component within the document filter search tags
HiddenCount (Panel Filter Document Search)
Hidden count component within the document filter search
Input (Panel Filter Document Search)
Input component within the document filter search
DropdownIcon (Panel Filter Document Search)
Dropdown icon component within the document filter search
Item (Panel Filter Document)
Item component within the document filter
Checkbox (Panel Filter Document Item)
Checkbox component within the document filter item
Checked (Panel Filter Document Item Checkbox)
Unchecked (Panel Filter Document Item Checkbox)
Name (Panel Filter Document Item)
Name component within the document filter item
Count (Panel Filter Document Item)
Count component within the document filter item
ViewAll (Panel Filter Document)
View all component within the document filter

​
Involved (Panel Filter)

Involved filter component in the comments sidebar panel filter
Name (Panel Filter Involved)
Name component within the involved filter
Search (Panel Filter Involved)
Search component within the involved filter
Tags (Panel Filter Involved Search)
Tags component within the involved filter search
Item (Panel Filter Involved Search Tags)
Item component within the involved filter search tags
HiddenCount (Panel Filter Involved Search)
Hidden count component within the involved filter search
Input (Panel Filter Involved Search)
Input component within the involved filter search
DropdownIcon (Panel Filter Involved Search)
Dropdown icon component within the involved filter search
Item (Panel Filter Involved)
Item component within the involved filter
Checkbox (Panel Filter Involved Item)
Checkbox component within the involved filter item
Checked (Panel Filter Involved Item Checkbox)
Unchecked (Panel Filter Involved Item Checkbox)
Name (Panel Filter Involved Item)
Name component within the involved filter item
Count (Panel Filter Involved Item)
Count component within the involved filter item

​
People (Panel Filter)

People filter component in the comments sidebar panel filter
Name (Panel Filter People)
People filter component in the comments sidebar panel filter
Search (Panel Filter People)
People filter component in the comments sidebar panel filter
Tags (Panel Filter People Search)
People filter component in the comments sidebar panel filter
Item (Panel Filter People Search Tags)
People filter component in the comments sidebar panel filter
Name (Panel Filter People Search Tags Item)
Close (Panel Filter People Search Tags Item)
HiddenCount (Panel Filter People Search)
People filter component in the comments sidebar panel filter
Input (Panel Filter People Search)
People filter component in the comments sidebar panel filter
DropdownIcon (Panel Filter People Search)
People filter component in the comments sidebar panel filter
Item (Panel Filter People)
People filter component in the comments sidebar panel filter
Checkbox (Panel Filter People Item)
People filter component in the comments sidebar panel filter
Checked (Panel Filter People Item Checkbox)
Unchecked (Panel Filter People Item Checkbox)
Name (Panel Filter People Item)
People filter component in the comments sidebar panel filter
Count (Panel Filter People Item)
People filter component in the comments sidebar panel filter

​
Tagged (Panel Filter)

Tagged filter component in the comments sidebar panel filter
Name (Panel Filter Tagged)
Name component within the tagged filter
Search (Panel Filter Tagged)
Search component within the tagged filter
Tags (Panel Filter Tagged Search)
Tags component within the tagged filter search
Item (Panel Filter Tagged Search Tags)
Item component within the tagged filter search tags
Name (Panel Filter Tagged Search Tags Item)
Close (Panel Filter Tagged Search Tags Item)
HiddenCount (Panel Filter Tagged Search)
Hidden count component within the tagged filter search
Input (Panel Filter Tagged Search)
Input component within the tagged filter search
DropdownIcon (Panel Filter Tagged Search)
Dropdown icon component within the tagged filter search
Item (Panel Filter Tagged)
Item component within the tagged filter
Checkbox (Panel Filter Tagged Item)
Checkbox component within the tagged filter item
Checked (Panel Filter Tagged Item Checkbox)
Unchecked (Panel Filter Tagged Item Checkbox)
Name (Panel Filter Tagged Item)
Name component within the tagged filter item
Count (Panel Filter Tagged Item)
Count component within the tagged filter item

​
Assigned (Panel Filter)

Assigned filter component in the comments sidebar panel filter
Name (Panel Filter Assigned)
Name component within the assigned filter
Search (Panel Filter Assigned)
Search component within the assigned filter
Tags (Panel Filter Assigned Search)
Tags component within the assigned filter search
Item (Panel Filter Assigned Search Tags)
Item component within the assigned filter search tags
Name (Panel Filter Assigned Search Tags Item)
Close (Panel Filter Assigned Search Tags Item)
HiddenCount (Panel Filter Assigned Search)
Hidden count component within the assigned filter search
Input (Panel Filter Assigned Search)
Input component within the assigned filter search
DropdownIcon (Panel Filter Assigned Search)
Dropdown icon component within the assigned filter search
Item (Panel Filter Assigned)
Item component within the assigned filter
Checkbox (Panel Filter Assigned Item)
Checkbox component within the assigned filter item
Checked (Panel Filter Assigned Item Checkbox)
Unchecked (Panel Filter Assigned Item Checkbox)
Name (Panel Filter Assigned Item)
Name component within the assigned filter item
Count (Panel Filter Assigned Item)
Count component within the assigned filter item

​
Custom (Panel Filter)

Custom filter component in the comments sidebar panel filter
Name (Panel Filter Custom)
Name component within the custom filter
Search (Panel Filter Custom)
Search component within the custom filter
Tags (Panel Filter Custom Search)
Tags component within the custom filter search
Item (Panel Filter Custom Search Tags)
Item component within the custom filter search tags
Name (Panel Filter Custom Search Tags Item)
Close (Panel Filter Custom Search Tags Item)
HiddenCount (Panel Filter Custom Search)
Hidden count component within the custom filter search
Input (Panel Filter Custom Search)
Input component within the custom filter search
DropdownIcon (Panel Filter Custom Search)
Dropdown icon component within the custom filter search
Item (Panel Filter Custom)
Item component within the custom filter
Checkbox (Panel Filter Custom Item)
Checkbox component within the custom filter item
Checked (Panel Filter Custom Item Checkbox)
Unchecked (Panel Filter Custom Item Checkbox)
Name (Panel Filter Custom Item)
Name component within the custom filter item
Count (Panel Filter Custom Item)
Count component within the custom filter item

​
Category (Panel Filter)

Category filter component in the comments sidebar panel filter
Name (Panel Filter Category)
Name component within the category filter
Search (Panel Filter Category)
Search component within the category filter
Tags (Panel Filter Category Search)
Tags component within the category filter search
Item (Panel Filter Category Search Tags)
Item component within the category filter search tags
Name (Panel Filter Category Search Tags Item)
Close (Panel Filter Category Search Tags Item)
HiddenCount (Panel Filter Category Search)
Hidden count component within the category filter search
Input (Panel Filter Category Search)
Input component within the category filter search
DropdownIcon (Panel Filter Category Search)
Dropdown icon component within the category filter search
Item (Panel Filter Category)
Item component within the category filter
Checkbox (Panel Filter Category Item)
Checkbox component within the category filter item
Checked (Panel Filter Category Item Checkbox)
Unchecked (Panel Filter Category Item Checkbox)
Name (Panel Filter Category Item)
Name component within the category filter item
Count (Panel Filter Category Item)
Count component within the category filter item

​
Priority (Panel Filter)

Priority filter component in the comments sidebar panel filter
Name (Panel Filter Priority)
Name component within the priority filter
Search (Panel Filter Priority)
Search component within the priority filter
Tags (Panel Filter Priority Search)
Tags component within the priority filter search
Item (Panel Filter Priority Search Tags)
Item component within the priority filter search tags
Name (Panel Filter Priority Search Tags Item)
Close (Panel Filter Priority Search Tags Item)
HiddenCount (Panel Filter Priority Search)
Hidden count component within the priority filter search
Input (Panel Filter Priority Search)
Input component within the priority filter search
DropdownIcon (Panel Filter Priority Search)
Dropdown icon component within the priority filter search
Item (Panel Filter Priority)
Item component within the priority filter
Checkbox (Panel Filter Priority Item)
Checkbox component within the priority filter item
Checked (Panel Filter Priority Item Checkbox)
Unchecked (Panel Filter Priority Item Checkbox)
Name (Panel Filter Priority Item)
Name component within the priority filter item
Count (Panel Filter Priority Item)
Count component within the priority filter item

​
Status (Panel Filter)

Status filter component in the comments sidebar panel filter
Name (Panel Filter Status)
Name component within the status filter
Search (Panel Filter Status)
Search component within the status filter
Tags (Panel Filter Status Search)
Tags component within the status filter search
Item (Panel Filter Status Search Tags)
Item component within the status filter search tags
Name (Panel Filter Status Search Tags Item)
Close (Panel Filter Status Search Tags Item)
HiddenCount (Panel Filter Status Search)
Hidden count component within the status filter search
Input (Panel Filter Status Search)
Input component within the status filter search
DropdownIcon (Panel Filter Status Search)
Dropdown icon component within the status filter search
Item (Panel Filter Status)
Item component within the status filter
Checkbox (Panel Filter Status Item)
Checkbox component within the status filter item
Checked (Panel Filter Status Item Checkbox)
Unchecked (Panel Filter Status Item Checkbox)
Name (Panel Filter Status Item)
Name component within the status filter item
Count (Panel Filter Status Item)
Count component within the status filter item

​
CommentType (Panel Filter)

CommentType filter component in the comments sidebar panel filter
Name (Panel Filter CommentType)
Name component within the commentType filter
Item (Panel Filter CommentType)
Item component within the commentType filter
Checkbox (Panel Filter CommentType Item)
Checkbox component within the commentType filter item
Checked (Panel Filter CommentType Item Checkbox)
Unchecked (Panel Filter CommentType Item Checkbox)
Name (Panel Filter CommentType Item)
Name component within the commentType filter item
Count (Panel Filter CommentType Item)
Count component within the commentType filter item

​
Versions (Panel Filter)

Versions filter component in the comments sidebar panel filter
Name (Panel Filter Versions)
Name component within the versions filter
Search (Panel Filter Versions)
Search component within the versions filter
Tags (Panel Filter Versions Search)
Tags component within the versions filter search
Item (Panel Filter Versions Search Tags)
Item component within the versions filter search tags
Name (Panel Filter Versions Search Tags Item)
Name component within the versions filter search tags item
Close (Panel Filter Versions Search Tags Item)
Close component within the versions filter search tags item
HiddenCount (Panel Filter Versions Search)
Hidden count component within the versions filter search
Input (Panel Filter Versions Search)
Input component within the versions filter search
DropdownIcon (Panel Filter Versions Search)
Dropdown icon component within the versions filter search
Item (Panel Filter Versions)
Item component within the versions filter
Checkbox (Panel Filter Versions Item)
Checkbox component within the versions filter item
Checked (Panel Filter Versions Item Checkbox)
Unchecked (Panel Filter Versions Item Checkbox)
Name (Panel Filter Versions Item)
Name component within the versions filter item
Count (Panel Filter Versions Item)
Count component within the versions filter item

​
GroupBy (Panel Filter)

GroupBy filter component in the comments sidebar panel filter
Name (Panel Filter GroupBy)
Name component within the groupBy filter
Item (Panel Filter GroupBy)
Item component within the groupBy filter
Checkbox (Panel Filter GroupBy Item)
Checkbox component within the groupBy filter item
Checked (Panel Filter GroupBy Item Checkbox)
Unchecked (Panel Filter GroupBy Item Checkbox)
Name (Panel Filter GroupBy Item)
Name component within the groupBy filter item
Count (Panel Filter GroupBy Item)
Count component within the groupBy filter item

​
ResetButton (Panel Filter)

Reset button component in the comments sidebar panel filter

​
DoneButton (Panel Filter)

Done button component in the comments sidebar panel filter
If you want to change the filters globally across all filters in the sidebar, customize the shared filter option item (shown below) once and reuse it. Use VeltCommentsSidebarWireframe.Filter.Item (and its Checkbox, Name, and Count subcomponents) to apply changes across all filters.

​
Item (Panel)

Item component in the comments sidebar panel

​
Checkbox (Panel Item)

Checkbox component in the comments sidebar panel item
Checked (Panel Item Checkbox)
Unchecked (Panel Item Checkbox)

​
Name (Panel Item)

Name component in the comments sidebar panel item

​
Count (Panel Item)

Count component in the comments sidebar panel item

​
List (Panel)

List component in the comments sidebar panel

​
Item (Panel List)

Item component in the comments sidebar panel list
Group (Panel List Item)
Group component in the comments sidebar panel list item
Name (Panel List Item Group)
Name component in the comments sidebar panel list item group
Count (Panel List Item Group)
Count component in the comments sidebar panel list item group
Arrow (Panel List Item Group)
Arrow component in the comments sidebar panel list item group
Annotation (Panel List Item)
Annotation component in the comments sidebar panel list item

​
EmptyPlaceholder (Panel)

Empty placeholder component in the comments sidebar panel

​
PageModeComposer (Panel)

​
FocusedThread

​
BackButton (FocusedThread)

​
DialogContainer (FocusedThread)

​
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
Example
API methods

​
Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false To enable Dark Mode for comments sidebar:
Example
API methods

​
Variants

Here are the variants that you can use in Comments Sidebar:
  • variant: This is the variant for the entire Comments Sidebar.
  • dialogVariant: This is the variant for the Comment Dialog that appears in the Comments Sidebar.
  • pageModeComposerVariant: This is the variant for the Comment Composer that appears in the Comments Sidebar in page mode.
  • focusedThreadDialogVariant: This is the variant for the Comment Dialog that appears when a focused thread mode is enabled.
React / Next.js