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

​
Overview

The Comment Sidebar V2 Primitives API provides 27+ granular components that can be used independently to build completely custom sidebar interfaces. Unlike the V1 sidebar’s monolithic structure, every section of the V2 sidebar is an independently importable and composable primitive. Each primitive can be used standalone or composed together for maximum customization flexibility. Key features of the V2 architecture:
  • Flat primitive components — each UI section is individually replaceable
  • Unified filter model — replaces the legacy minimalFilter + advancedFilters system
  • CDK virtual scroll — renders only the visible viewport slice for smooth performance on large comment sets
  • Focused-thread view — opens individual threads in a dedicated view inside the sidebar
  • Conditional styling — all primitives support velt-class conditional styling via applyConditionalClasses

​
Usage Patterns

​
Pattern 1: Drop-in Replacement

Use VeltCommentsSidebarV2 as a direct replacement for VeltCommentsSidebar. 
<VeltCommentsSidebarV2
  pageMode={false}
  focusedThreadMode={false}
  readOnly={false}
  position="right"
  variant="sidebar"
  forceClose={true}
  onSidebarOpen={(data) => console.log('sidebar opened', data)}
  onSidebarClose={(data) => console.log('sidebar closed', data)}
  onCommentClick={(data) => console.log('comment clicked', data)}
  onCommentNavigationButtonClick={(data) => console.log('nav button clicked', data)}
/>

​
Pattern 2: Version Prop on Existing Sidebar

Route the existing VeltCommentsSidebar to the V2 implementation by setting version="2". 
<VeltCommentsSidebar version="2" />

​
Pattern 3: Compose from Primitives

Build a fully custom sidebar by composing individual primitives. 
<VeltCommentsSidebarV2>
  <VeltCommentsSidebarV2Skeleton />
  <VeltCommentsSidebarV2Panel>
    <VeltCommentsSidebarV2Header />
    <VeltCommentsSidebarV2List />
    <VeltCommentsSidebarV2EmptyPlaceholder />
    <VeltCommentsSidebarV2PageModeComposer />
    <VeltCommentsSidebarV2FocusedThread />
  </VeltCommentsSidebarV2Panel>
</VeltCommentsSidebarV2>

​
Components

​
VeltCommentsSidebarV2

Root container for the V2 sidebar. Provides shared state context to all child primitives via parentLocalUIState. See VeltCommentsSidebarV2Props for the type definition. 
<VeltCommentsSidebarV2
  pageMode={false}
  focusedThreadMode={false}
  readOnly={false}
  embedMode={null}
  floatingMode={false}
  position="right"
  variant="sidebar"
  forceClose={true}
  onSidebarOpen={(data) => console.log('sidebar opened', data)}
  onSidebarClose={(data) => console.log('sidebar closed', data)}
  onCommentClick={(data) => console.log('comment clicked', data)}
  onCommentNavigationButtonClick={(data) => console.log('nav button clicked', data)}
/>
Props:
PropTypeDefaultDescription
pageModebooleanfalseEnable page-level comments mode
focusedThreadModebooleanfalseOpen individual threads in a focused view inside the sidebar
readOnlybooleanfalseRender the sidebar in read-only mode
embedModestring | nullnullEmbed the sidebar inside a custom container
floatingModebooleanfalseRender the sidebar in floating mode
position'left' | 'right''right'Anchor position of the sidebar panel
variantstring'sidebar'Display variant
forceClosebooleantrueForce the sidebar closed programmatically
versionstring-When set to "2" on VeltCommentsSidebar, routes to the V2 implementation
onSidebarOpen(data: any) => void-Callback fired when the sidebar opens
onSidebarClose(data: any) => void-Callback fired when the sidebar closes
onCommentClick(data: any) => void-Callback fired when a comment item is clicked
onCommentNavigationButtonClick(data: any) => void-Callback fired when the comment navigation button is clicked

​
VeltCommentsSidebarV2Skeleton

Loading skeleton displayed while the sidebar content is loading. 
<VeltCommentsSidebarV2Skeleton />
Props: No additional props.

​
VeltCommentsSidebarV2Panel

Main panel container that holds all sidebar content sections: header, list, empty placeholder, page-mode composer, and focused thread. 
<VeltCommentsSidebarV2Panel>
  <VeltCommentsSidebarV2Header />
  <VeltCommentsSidebarV2List />
  <VeltCommentsSidebarV2EmptyPlaceholder />
  <VeltCommentsSidebarV2PageModeComposer />
  <VeltCommentsSidebarV2FocusedThread />
</VeltCommentsSidebarV2Panel>
Props: No additional props.

​
VeltCommentsSidebarV2Header

Header section of the sidebar panel. Contains the close button, minimal actions dropdown, and filter dropdown. 
<VeltCommentsSidebarV2Header>
  <VeltCommentsSidebarV2CloseButton />
  <VeltCommentsSidebarV2MinimalActionsDropdown />
  <VeltCommentsSidebarV2FilterDropdown />
</VeltCommentsSidebarV2Header>
Props: No additional props.

​
VeltCommentsSidebarV2CloseButton

Button to close the sidebar panel. 
<VeltCommentsSidebarV2CloseButton />
Props: No additional props.

​
VeltCommentsSidebarV2MinimalActionsDropdown

Dropdown menu in the header providing bulk actions such as mark-all-read and mark-all-resolved. 
<VeltCommentsSidebarV2MinimalActionsDropdown>
  <VeltCommentsSidebarV2MinimalActionsDropdownTrigger />
  <VeltCommentsSidebarV2MinimalActionsDropdownContent>
    <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
    <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
  </VeltCommentsSidebarV2MinimalActionsDropdownContent>
</VeltCommentsSidebarV2MinimalActionsDropdown>
Props: No additional props.

​
VeltCommentsSidebarV2MinimalActionsDropdownTrigger

Trigger button that opens the minimal actions dropdown. 
<VeltCommentsSidebarV2MinimalActionsDropdownTrigger />
Props: No additional props.

​
VeltCommentsSidebarV2MinimalActionsDropdownContent

Content container for the minimal actions dropdown menu items. 
<VeltCommentsSidebarV2MinimalActionsDropdownContent>
  <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
  <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
</VeltCommentsSidebarV2MinimalActionsDropdownContent>
Props: No additional props.

​
VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead

Action item that marks all comments as read. 
<VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
Props: No additional props.

​
VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved

Action item that marks all comments as resolved. 
<VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdown

Dropdown menu in the header for filtering comments. Uses the unified filter model that replaces the legacy minimalFilter + advancedFilters system. 
<VeltCommentsSidebarV2FilterDropdown>
  <VeltCommentsSidebarV2FilterDropdownTrigger />
  <VeltCommentsSidebarV2FilterDropdownContent>
    <VeltCommentsSidebarV2FilterDropdownContentList>
      <VeltCommentsSidebarV2FilterDropdownContentListItem>
        <VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
        <VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
      </VeltCommentsSidebarV2FilterDropdownContentListItem>
      <VeltCommentsSidebarV2FilterDropdownContentListCategory>
        <VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
      </VeltCommentsSidebarV2FilterDropdownContentListCategory>
    </VeltCommentsSidebarV2FilterDropdownContentList>
  </VeltCommentsSidebarV2FilterDropdownContent>
</VeltCommentsSidebarV2FilterDropdown>
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownTrigger

Trigger button that opens the filter dropdown. 
<VeltCommentsSidebarV2FilterDropdownTrigger />
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContent

Content container for the filter dropdown. 
<VeltCommentsSidebarV2FilterDropdownContent>
  <VeltCommentsSidebarV2FilterDropdownContentList />
</VeltCommentsSidebarV2FilterDropdownContent>
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentList

Scrollable list of filter options. Contains filter items and filter categories. 
<VeltCommentsSidebarV2FilterDropdownContentList>
  <VeltCommentsSidebarV2FilterDropdownContentListItem />
  <VeltCommentsSidebarV2FilterDropdownContentListCategory />
</VeltCommentsSidebarV2FilterDropdownContentList>
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentListItem

Individual filter option within the filter list. Contains an indicator and a label. 
<VeltCommentsSidebarV2FilterDropdownContentListItem>
  <VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
  <VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
</VeltCommentsSidebarV2FilterDropdownContentListItem>
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentListItemIndicator

Visual indicator (such as a checkbox or icon) showing the active state of a filter option. 
<VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentListItemLabel

Text label for a filter option. 
<VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentListCategory

Group container for organizing filter options into categories. 
<VeltCommentsSidebarV2FilterDropdownContentListCategory>
  <VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
</VeltCommentsSidebarV2FilterDropdownContentListCategory>
Props: No additional props.

​
VeltCommentsSidebarV2FilterDropdownContentListCategoryContent

Content area within a filter category, rendering the category’s filter items. 
<VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
Props: No additional props.

​
VeltCommentsSidebarV2List

Scrollable list of comment threads. Uses CDK virtual scroll to render only the visible viewport slice, enabling smooth performance on large comment sets. 
<VeltCommentsSidebarV2List />
Props: No additional props.

​
VeltCommentsSidebarV2ListItem

Individual comment thread item rendered within the list. 
<VeltCommentsSidebarV2ListItem />
Props: No additional props.

​
VeltCommentsSidebarV2EmptyPlaceholder

Placeholder displayed when no comments match the current filter or when the sidebar has no comments. Contains an optional reset-filter button. 
<VeltCommentsSidebarV2EmptyPlaceholder>
  <VeltCommentsSidebarV2ResetFilterButton />
</VeltCommentsSidebarV2EmptyPlaceholder>
Props: No additional props.

​
VeltCommentsSidebarV2ResetFilterButton

Button that clears all active filters, returning the sidebar to its unfiltered state. 
<VeltCommentsSidebarV2ResetFilterButton />
Props: No additional props.

​
VeltCommentsSidebarV2PageModeComposer

Composer for creating new page-level comments directly from the sidebar. Only visible when pageMode is enabled. 
<VeltCommentsSidebarV2PageModeComposer />
Props: No additional props.

​
VeltCommentsSidebarV2FocusedThread

Container for the focused-thread view that opens when a comment is clicked with focusedThreadMode enabled. Contains a back button and the dialog container. 
<VeltCommentsSidebarV2FocusedThread>
  <VeltCommentsSidebarV2FocusedThreadBackButton />
  <VeltCommentsSidebarV2FocusedThreadDialogContainer />
</VeltCommentsSidebarV2FocusedThread>
Props: No additional props.

​
VeltCommentsSidebarV2FocusedThreadBackButton

Back button that exits the focused-thread view and returns to the comment list. 
<VeltCommentsSidebarV2FocusedThreadBackButton />
Props: No additional props.

​
VeltCommentsSidebarV2FocusedThreadDialogContainer

Container that renders the full comment dialog for the focused thread. 
<VeltCommentsSidebarV2FocusedThreadDialogContainer />
Props: No additional props.

​
Component Map

All 27 primitives and their corresponding HTML elements:
React ComponentHTML Element
VeltCommentsSidebarV2velt-comments-sidebar-v2
VeltCommentsSidebarV2Skeletonvelt-comments-sidebar-skeleton-v2
VeltCommentsSidebarV2Panelvelt-comments-sidebar-panel-v2
VeltCommentsSidebarV2Headervelt-comments-sidebar-header-v2
VeltCommentsSidebarV2CloseButtonvelt-comments-sidebar-close-button-v2
VeltCommentsSidebarV2MinimalActionsDropdownvelt-comments-sidebar-minimal-actions-dropdown-v2
VeltCommentsSidebarV2MinimalActionsDropdownTriggervelt-comments-sidebar-minimal-actions-dropdown-trigger-v2
VeltCommentsSidebarV2MinimalActionsDropdownContentvelt-comments-sidebar-minimal-actions-dropdown-content-v2
VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllReadvelt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2
VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolvedvelt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2
VeltCommentsSidebarV2FilterDropdownvelt-comments-sidebar-filter-dropdown-v2
VeltCommentsSidebarV2FilterDropdownTriggervelt-comments-sidebar-filter-dropdown-trigger-v2
VeltCommentsSidebarV2FilterDropdownContentvelt-comments-sidebar-filter-dropdown-content-v2
VeltCommentsSidebarV2FilterDropdownContentListvelt-comments-sidebar-filter-dropdown-content-list-v2
VeltCommentsSidebarV2FilterDropdownContentListItemvelt-comments-sidebar-filter-dropdown-content-list-item-v2
VeltCommentsSidebarV2FilterDropdownContentListItemIndicatorvelt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2
VeltCommentsSidebarV2FilterDropdownContentListItemLabelvelt-comments-sidebar-filter-dropdown-content-list-item-label-v2
VeltCommentsSidebarV2FilterDropdownContentListCategoryvelt-comments-sidebar-filter-dropdown-content-list-category-v2
VeltCommentsSidebarV2FilterDropdownContentListCategoryContentvelt-comments-sidebar-filter-dropdown-content-list-category-content-v2
VeltCommentsSidebarV2Listvelt-comments-sidebar-list-v2
VeltCommentsSidebarV2ListItemvelt-comments-sidebar-list-item-v2
VeltCommentsSidebarV2EmptyPlaceholdervelt-comments-sidebar-empty-placeholder-v2
VeltCommentsSidebarV2ResetFilterButtonvelt-comments-sidebar-reset-filter-button-v2
VeltCommentsSidebarV2PageModeComposervelt-comments-sidebar-page-mode-composer-v2
VeltCommentsSidebarV2FocusedThreadvelt-comments-sidebar-focused-thread-v2
VeltCommentsSidebarV2FocusedThreadBackButtonvelt-comments-sidebar-focused-thread-back-button-v2
VeltCommentsSidebarV2FocusedThreadDialogContainervelt-comments-sidebar-focused-thread-dialog-container-v2