Comment Sidebar V2 Primitives

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

Explore primitives interactively in our Storybook.

Overview

The Comment Sidebar V2 Primitives API provides 56+ 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

The root container VeltCommentsSidebarV2 remains plural. All standalone sub-primitives use the singular form VeltCommentSidebarV2* (React) / velt-comment-sidebar-…-v2 (HTML).

Usage Patterns

Pattern 1: Drop-in Replacement

Use VeltCommentsSidebarV2 as a direct replacement for VeltCommentsSidebar.

React / Next.js
Other Frameworks

<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)}
/>

<velt-comments-sidebar-v2
  page-mode="false"
  focused-thread-mode="false"
  read-only="false"
  position="right"
  variant="sidebar"
  force-close="true"
></velt-comments-sidebar-v2>

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

React / Next.js
Other Frameworks

<VeltCommentsSidebar version="2" />

<velt-comments-sidebar version="2"></velt-comments-sidebar>

Pattern 3: Compose from Primitives

Build a fully custom sidebar by composing individual primitives.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2>
  <VeltCommentSidebarV2Skeleton />
  <VeltCommentSidebarV2Panel>
    <VeltCommentSidebarV2Header />
    <VeltCommentSidebarV2List />
    <VeltCommentSidebarV2EmptyPlaceholder />
    <VeltCommentSidebarV2PageModeComposer />
    <VeltCommentSidebarV2FocusedThread />
  </VeltCommentSidebarV2Panel>
</VeltCommentsSidebarV2>

<velt-comments-sidebar-v2>
  <velt-comment-sidebar-skeleton-v2></velt-comment-sidebar-skeleton-v2>
  <velt-comment-sidebar-panel-v2>
    <velt-comment-sidebar-header-v2></velt-comment-sidebar-header-v2>
    <velt-comment-sidebar-list-v2></velt-comment-sidebar-list-v2>
    <velt-comment-sidebar-empty-placeholder-v2></velt-comment-sidebar-empty-placeholder-v2>
    <velt-comment-sidebar-page-mode-composer-v2></velt-comment-sidebar-page-mode-composer-v2>
    <velt-comment-sidebar-focused-thread-v2></velt-comment-sidebar-focused-thread-v2>
  </velt-comment-sidebar-panel-v2>
</velt-comments-sidebar-v2>

Components

The MinimalActionsDropdown primitive family was removed in this release and replaced by the combined actions filter dropdown, configured via minimal-filters.

VeltCommentsSidebarV2

Root container for the V2 sidebar. Provides shared state context to all child primitives via parentLocalUIState. See VeltCommentsSidebarV2Props for the type definition.

React / Next.js
Other Frameworks

<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:

Prop	Type	Default	Description
`pageMode`	`boolean`	`false`	Enable page-level comments mode
`focusedThreadMode`	`boolean`	`false`	Open individual threads in a focused view inside the sidebar
`readOnly`	`boolean`	`false`	Render the sidebar in read-only mode
`embedMode`	`string \| null`	`null`	Embed the sidebar inside a custom container
`floatingMode`	`boolean`	`false`	Render the sidebar in floating mode
`position`	`'left' \| 'right'`	`'right'`	Anchor position of the sidebar panel
`variant`	`string`	`'sidebar'`	Display variant
`forceClose`	`boolean`	`true`	Force the sidebar closed programmatically
`version`	`string`	-	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

<velt-comments-sidebar-v2
  page-mode="false"
  focused-thread-mode="false"
  read-only="false"
  embed-mode="null"
  floating-mode="false"
  position="right"
  variant="sidebar"
  force-close="true"
></velt-comments-sidebar-v2>

Attributes:

Attribute	Type	Default	Description
`page-mode`	`string`	`"false"`	Enable page-level comments mode
`focused-thread-mode`	`string`	`"false"`	Open individual threads in a focused view inside the sidebar
`read-only`	`string`	`"false"`	Render the sidebar in read-only mode
`embed-mode`	`string`	`"null"`	Embed the sidebar inside a custom container
`floating-mode`	`string`	`"false"`	Render the sidebar in floating mode
`position`	`string`	`"right"`	Anchor position of the sidebar panel
`variant`	`string`	`"sidebar"`	Display variant
`force-close`	`string`	`"true"`	Force the sidebar closed programmatically
`version`	`string`	-	When set to `"2"` on `velt-comments-sidebar`, routes to the V2 implementation

VeltCommentSidebarV2Skeleton

Loading skeleton displayed while the sidebar content is loading.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2Skeleton />

Props: No additional props.

<velt-comment-sidebar-skeleton-v2></velt-comment-sidebar-skeleton-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2Panel

Main panel container that holds all sidebar content sections: header, list, empty placeholder, page-mode composer, and focused thread.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2Panel>
  <VeltCommentSidebarV2Header />
  <VeltCommentSidebarV2List />
  <VeltCommentSidebarV2EmptyPlaceholder />
  <VeltCommentSidebarV2PageModeComposer />
  <VeltCommentSidebarV2FocusedThread />
</VeltCommentSidebarV2Panel>

Props: No additional props.

<velt-comment-sidebar-panel-v2>
  <velt-comment-sidebar-header-v2></velt-comment-sidebar-header-v2>
  <velt-comment-sidebar-list-v2></velt-comment-sidebar-list-v2>
  <velt-comment-sidebar-empty-placeholder-v2></velt-comment-sidebar-empty-placeholder-v2>
  <velt-comment-sidebar-page-mode-composer-v2></velt-comment-sidebar-page-mode-composer-v2>
  <velt-comment-sidebar-focused-thread-v2></velt-comment-sidebar-focused-thread-v2>
</velt-comment-sidebar-panel-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2Header

Header section of the sidebar panel. Contains the close button, fullscreen button, search, filter button, and filter dropdown.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2Header>
  <VeltCommentSidebarV2CloseButton />
  <VeltCommentSidebarV2FullscreenButton />
  <VeltCommentSidebarV2Search />
  <VeltCommentSidebarV2FilterButton />
  <VeltCommentSidebarV2FilterDropdown />
</VeltCommentSidebarV2Header>

Props: No additional props.

<velt-comment-sidebar-header-v2>
  <velt-comment-sidebar-close-button-v2></velt-comment-sidebar-close-button-v2>
  <velt-comment-sidebar-fullscreen-button-v2></velt-comment-sidebar-fullscreen-button-v2>
  <velt-comment-sidebar-search-v2></velt-comment-sidebar-search-v2>
  <velt-comment-sidebar-filter-button-v2></velt-comment-sidebar-filter-button-v2>
  <velt-comment-sidebar-filter-dropdown-v2></velt-comment-sidebar-filter-dropdown-v2>
</velt-comment-sidebar-header-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2CloseButton

Button to close the sidebar panel.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2CloseButton />

Props: No additional props.

<velt-comment-sidebar-close-button-v2></velt-comment-sidebar-close-button-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FullscreenButton

Fullscreen toggle in the header; emits onFullscreenClick when activated.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FullscreenButton />

Props: No additional props.

<velt-comment-sidebar-fullscreen-button-v2></velt-comment-sidebar-fullscreen-button-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2Search

Search container in the header that holds the search icon and input.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2Search>
  <VeltCommentSidebarV2SearchIcon />
  <VeltCommentSidebarV2SearchInput />
</VeltCommentSidebarV2Search>

Props: No additional props.

<velt-comment-sidebar-search-v2>
  <velt-comment-sidebar-search-v2-icon></velt-comment-sidebar-search-v2-icon>
  <velt-comment-sidebar-search-v2-input></velt-comment-sidebar-search-v2-input>
</velt-comment-sidebar-search-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2SearchIcon

Search icon rendered inside the search container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2SearchIcon />

Props: No additional props.

<velt-comment-sidebar-search-v2-icon></velt-comment-sidebar-search-v2-icon>

Attributes: No additional attributes.

VeltCommentSidebarV2SearchInput

Text input for searching comments within the sidebar.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2SearchInput />

Props: No additional props.

<velt-comment-sidebar-search-v2-input></velt-comment-sidebar-search-v2-input>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterButton

Header button that opens the filter UI; shows an applied-state icon when filters are active.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterButton>
  <VeltCommentSidebarV2FilterButtonAppliedIcon />
</VeltCommentSidebarV2FilterButton>

Props: No additional props.

<velt-comment-sidebar-filter-button-v2>
  <velt-comment-sidebar-filter-button-v2-applied-icon></velt-comment-sidebar-filter-button-v2-applied-icon>
</velt-comment-sidebar-filter-button-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterButtonAppliedIcon

Icon shown on the filter button when one or more filters are applied.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterButtonAppliedIcon />

Props: No additional props.

<velt-comment-sidebar-filter-button-v2-applied-icon></velt-comment-sidebar-filter-button-v2-applied-icon>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainer

Root container for the Main Filter bottom-sheet, holding the title, action buttons, group-by control, and section list.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainer>
  <VeltCommentSidebarV2FilterContainerTitle />
  <VeltCommentSidebarV2FilterContainerCloseButton />
  <VeltCommentSidebarV2FilterContainerGroupBy />
  <VeltCommentSidebarV2FilterContainerSectionList />
  <VeltCommentSidebarV2FilterContainerResetButton />
  <VeltCommentSidebarV2FilterContainerApplyButton />
</VeltCommentSidebarV2FilterContainer>

Props: No additional props.

<velt-comment-sidebar-filter-container-v2>
  <velt-comment-sidebar-filter-container-v2-title></velt-comment-sidebar-filter-container-v2-title>
  <velt-comment-sidebar-filter-container-v2-close-button></velt-comment-sidebar-filter-container-v2-close-button>
  <velt-comment-sidebar-filter-container-v2-group-by></velt-comment-sidebar-filter-container-v2-group-by>
  <velt-comment-sidebar-filter-container-v2-section-list></velt-comment-sidebar-filter-container-v2-section-list>
  <velt-comment-sidebar-filter-container-v2-reset-button></velt-comment-sidebar-filter-container-v2-reset-button>
  <velt-comment-sidebar-filter-container-v2-apply-button></velt-comment-sidebar-filter-container-v2-apply-button>
</velt-comment-sidebar-filter-container-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerTitle

Title text for the Main Filter container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerTitle />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-title></velt-comment-sidebar-filter-container-v2-title>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerCloseButton

Button that closes the Main Filter container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerCloseButton />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-close-button></velt-comment-sidebar-filter-container-v2-close-button>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerApplyButton

Button that applies the currently selected filters and closes the container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerApplyButton />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-apply-button></velt-comment-sidebar-filter-container-v2-apply-button>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerResetButton

Button that clears all selections in the Main Filter container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerResetButton />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-reset-button></velt-comment-sidebar-filter-container-v2-reset-button>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerGroupBy

Group-by control that selects how filtered results are grouped.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerGroupBy />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-group-by></velt-comment-sidebar-filter-container-v2-group-by>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionList

Scrollable list of filter sections within the Main Filter container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionList>
  <VeltCommentSidebarV2FilterContainerSection />
</VeltCommentSidebarV2FilterContainerSectionList>

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-list>
  <velt-comment-sidebar-filter-container-v2-section></velt-comment-sidebar-filter-container-v2-section>
</velt-comment-sidebar-filter-container-v2-section-list>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSection

Individual filter section containing a label and a field.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSection>
  <VeltCommentSidebarV2FilterContainerSectionLabel />
  <VeltCommentSidebarV2FilterContainerSectionField />
</VeltCommentSidebarV2FilterContainerSection>

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section>
  <velt-comment-sidebar-filter-container-v2-section-label></velt-comment-sidebar-filter-container-v2-section-label>
  <velt-comment-sidebar-filter-container-v2-section-field></velt-comment-sidebar-filter-container-v2-section-field>
</velt-comment-sidebar-filter-container-v2-section>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionLabel

Label text for a filter section.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionLabel />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-label></velt-comment-sidebar-filter-container-v2-section-label>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionField

Field wrapper for a filter section that hosts the control and its options. Accepts a searchable boolean input that toggles the per-section search box.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionField searchable={true}>
  <VeltCommentSidebarV2FilterContainerSectionControl />
  <VeltCommentSidebarV2FilterContainerSectionOptionList />
</VeltCommentSidebarV2FilterContainerSectionField>

Props:

Prop	Type	Default	Description
`searchable`	`boolean`	`false`	Toggles the per-section search box

<velt-comment-sidebar-filter-container-v2-section-field searchable="true">
  <velt-comment-sidebar-filter-container-v2-section-control></velt-comment-sidebar-filter-container-v2-section-control>
  <velt-comment-sidebar-filter-container-v2-section-option-list></velt-comment-sidebar-filter-container-v2-section-option-list>
</velt-comment-sidebar-filter-container-v2-section-field>

Attributes:

Attribute	Type	Default	Description
`searchable`	`string`	`"false"`	Toggles the per-section search box

VeltCommentSidebarV2FilterContainerSectionControl

Control surface for a filter section that displays the selected value and toggles the option list. Accepts a searchable boolean input that toggles the per-section search box.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControl searchable={true}>
  <VeltCommentSidebarV2FilterContainerSectionControlValue />
  <VeltCommentSidebarV2FilterContainerSectionControlChipList />
  <VeltCommentSidebarV2FilterContainerSectionControlSearch />
  <VeltCommentSidebarV2FilterContainerSectionControlChevron />
</VeltCommentSidebarV2FilterContainerSectionControl>

Props:

Prop	Type	Default	Description
`searchable`	`boolean`	`false`	Toggles the per-section search box

<velt-comment-sidebar-filter-container-v2-section-control searchable="true">
  <velt-comment-sidebar-filter-container-v2-section-control-value></velt-comment-sidebar-filter-container-v2-section-control-value>
  <velt-comment-sidebar-filter-container-v2-section-control-chip-list></velt-comment-sidebar-filter-container-v2-section-control-chip-list>
  <velt-comment-sidebar-filter-container-v2-section-control-search></velt-comment-sidebar-filter-container-v2-section-control-search>
  <velt-comment-sidebar-filter-container-v2-section-control-chevron></velt-comment-sidebar-filter-container-v2-section-control-chevron>
</velt-comment-sidebar-filter-container-v2-section-control>

Attributes:

Attribute	Type	Default	Description
`searchable`	`string`	`"false"`	Toggles the per-section search box

VeltCommentSidebarV2FilterContainerSectionControlChevron

Chevron indicator showing the open/closed state of a section control.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControlChevron />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-control-chevron></velt-comment-sidebar-filter-container-v2-section-control-chevron>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionControlValue

Displays the currently selected value(s) of a section control.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControlValue />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-control-value></velt-comment-sidebar-filter-container-v2-section-control-value>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionControlChipList

List of selected-value chips for a section control.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControlChipList>
  <VeltCommentSidebarV2FilterContainerSectionControlChip />
</VeltCommentSidebarV2FilterContainerSectionControlChipList>

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-control-chip-list>
  <velt-comment-sidebar-filter-container-v2-section-control-chip></velt-comment-sidebar-filter-container-v2-section-control-chip>
</velt-comment-sidebar-filter-container-v2-section-control-chip-list>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionControlChip

Individual chip representing a selected value in a section control.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControlChip />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-control-chip></velt-comment-sidebar-filter-container-v2-section-control-chip>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionControlSearch

Per-section search box within a section control. Rendered when the section is searchable.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionControlSearch searchable={true} />

Props:

Prop	Type	Default	Description
`searchable`	`boolean`	`false`	Toggles the per-section search box

<velt-comment-sidebar-filter-container-v2-section-control-search searchable="true"></velt-comment-sidebar-filter-container-v2-section-control-search>

Attributes:

Attribute	Type	Default	Description
`searchable`	`string`	`"false"`	Toggles the per-section search box

VeltCommentSidebarV2FilterContainerSectionOptionList

List of selectable options within a filter section. Accepts a searchable boolean input that toggles the per-section search box.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionOptionList searchable={true}>
  <VeltCommentSidebarV2FilterContainerSectionOption />
</VeltCommentSidebarV2FilterContainerSectionOptionList>

Props:

Prop	Type	Default	Description
`searchable`	`boolean`	`false`	Toggles the per-section search box

<velt-comment-sidebar-filter-container-v2-section-option-list searchable="true">
  <velt-comment-sidebar-filter-container-v2-section-option></velt-comment-sidebar-filter-container-v2-section-option>
</velt-comment-sidebar-filter-container-v2-section-option-list>

Attributes:

Attribute	Type	Default	Description
`searchable`	`string`	`"false"`	Toggles the per-section search box

VeltCommentSidebarV2FilterContainerSectionOption

Individual selectable option containing a checkbox, name, and count.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionOption>
  <VeltCommentSidebarV2FilterContainerSectionOptionCheckbox />
  <VeltCommentSidebarV2FilterContainerSectionOptionName />
  <VeltCommentSidebarV2FilterContainerSectionOptionCount />
</VeltCommentSidebarV2FilterContainerSectionOption>

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-option>
  <velt-comment-sidebar-filter-container-v2-section-option-checkbox></velt-comment-sidebar-filter-container-v2-section-option-checkbox>
  <velt-comment-sidebar-filter-container-v2-section-option-name></velt-comment-sidebar-filter-container-v2-section-option-name>
  <velt-comment-sidebar-filter-container-v2-section-option-count></velt-comment-sidebar-filter-container-v2-section-option-count>
</velt-comment-sidebar-filter-container-v2-section-option>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionOptionCheckbox

Checkbox indicating whether an option is selected.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionOptionCheckbox />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-option-checkbox></velt-comment-sidebar-filter-container-v2-section-option-checkbox>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionOptionName

Display name for a filter option.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionOptionName />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-option-name></velt-comment-sidebar-filter-container-v2-section-option-name>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterContainerSectionOptionCount

Count of matching comments for a filter option.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterContainerSectionOptionCount />

Props: No additional props.

<velt-comment-sidebar-filter-container-v2-section-option-count></velt-comment-sidebar-filter-container-v2-section-option-count>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdown

Dropdown menu in the header for filtering comments. Uses the unified filter model that replaces the legacy minimalFilter + advancedFilters system.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdown>
  <VeltCommentSidebarV2FilterDropdownTrigger />
  <VeltCommentSidebarV2FilterDropdownContent>
    <VeltCommentSidebarV2FilterDropdownContentList>
      <VeltCommentSidebarV2FilterDropdownContentListItem>
        <VeltCommentSidebarV2FilterDropdownContentListItemIndicator />
        <VeltCommentSidebarV2FilterDropdownContentListItemLabel />
        <VeltCommentSidebarV2FilterDropdownContentListItemCount />
      </VeltCommentSidebarV2FilterDropdownContentListItem>
      <VeltCommentSidebarV2FilterDropdownContentListCategory>
        <VeltCommentSidebarV2FilterDropdownContentListCategoryLabel />
        <VeltCommentSidebarV2FilterDropdownContentListCategoryContent />
      </VeltCommentSidebarV2FilterDropdownContentListCategory>
    </VeltCommentSidebarV2FilterDropdownContentList>
  </VeltCommentSidebarV2FilterDropdownContent>
</VeltCommentSidebarV2FilterDropdown>

Props:

Prop	Type	Default	Description
`type`	`'filter' \| 'sort' \| 'quick' \| 'actions'`	unset	Scopes which content the dropdown renders. See Filter-dropdown `type` scoping.
`fields`	`FilterField[]`	`[]`	Fields shown when `type` is `filter`.
`field`	`string`	unset	Single field id — shorthand for a one-field `filter` dropdown.
`label`	`string`	unset	Trigger label for the dropdown.
`sorts`	`(string \|` `SidebarSortConfig)[]`	`[]`	Sort options shown when `type` is `sort` or `actions`.
`actions`	`(string \|` `SidebarQuickFilterConfig)[]`	`[]`	Quick presets/predicates shown when `type` is `quick` or `actions`.
`showCategoryFilters`	`boolean`	unset	Show the built-in category filter sections in the dropdown.

These inputs mirror a single SidebarMinimalFilterConfig entry from minimalFilters.

<velt-comment-sidebar-filter-dropdown-v2>
  <velt-comment-sidebar-filter-dropdown-trigger-v2></velt-comment-sidebar-filter-dropdown-trigger-v2>
  <velt-comment-sidebar-filter-dropdown-content-v2>
    <velt-comment-sidebar-filter-dropdown-content-list-v2>
      <velt-comment-sidebar-filter-dropdown-content-list-item-v2>
        <velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2>
        <velt-comment-sidebar-filter-dropdown-content-list-item-label-v2></velt-comment-sidebar-filter-dropdown-content-list-item-label-v2>
        <velt-comment-sidebar-filter-dropdown-content-list-item-count-v2></velt-comment-sidebar-filter-dropdown-content-list-item-count-v2>
      </velt-comment-sidebar-filter-dropdown-content-list-item-v2>
      <velt-comment-sidebar-filter-dropdown-content-list-category-v2>
        <velt-comment-sidebar-filter-dropdown-content-list-category-label-v2></velt-comment-sidebar-filter-dropdown-content-list-category-label-v2>
        <velt-comment-sidebar-filter-dropdown-content-list-category-content-v2></velt-comment-sidebar-filter-dropdown-content-list-category-content-v2>
      </velt-comment-sidebar-filter-dropdown-content-list-category-v2>
    </velt-comment-sidebar-filter-dropdown-content-list-v2>
  </velt-comment-sidebar-filter-dropdown-content-v2>
</velt-comment-sidebar-filter-dropdown-v2>

Attributes:

Attribute	Type	Default	Description
`type`	`string`	unset	Scopes which content the dropdown renders (`filter` / `sort` / `quick` / `actions`).
`fields`	`string` (JSON)	`[]`	`FilterField[]` shown when `type` is `filter`.
`field`	`string`	unset	Single field id — shorthand for a one-field `filter` dropdown.
`label`	`string`	unset	Trigger label for the dropdown.
`sorts`	`string` (JSON)	`[]`	Sort options shown when `type` is `sort` or `actions`.
`actions`	`string` (JSON)	`[]`	Quick presets/predicates shown when `type` is `quick` or `actions`.
`show-category-filters`	`string`	unset	Show the built-in category filter sections in the dropdown.

VeltCommentSidebarV2FilterDropdownTrigger

Trigger button that opens the filter dropdown.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownTrigger />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-trigger-v2></velt-comment-sidebar-filter-dropdown-trigger-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContent

Content container for the filter dropdown.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContent>
  <VeltCommentSidebarV2FilterDropdownContentList />
</VeltCommentSidebarV2FilterDropdownContent>

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-v2></velt-comment-sidebar-filter-dropdown-content-list-v2>
</velt-comment-sidebar-filter-dropdown-content-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentList

Scrollable list of filter options. Contains filter items and filter categories.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentList>
  <VeltCommentSidebarV2FilterDropdownContentListItem />
  <VeltCommentSidebarV2FilterDropdownContentListCategory />
</VeltCommentSidebarV2FilterDropdownContentList>

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-item-v2></velt-comment-sidebar-filter-dropdown-content-list-item-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-category-v2></velt-comment-sidebar-filter-dropdown-content-list-category-v2>
</velt-comment-sidebar-filter-dropdown-content-list-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListItem

Individual filter option within the filter list. Contains an indicator, a label, and a count.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListItem>
  <VeltCommentSidebarV2FilterDropdownContentListItemIndicator />
  <VeltCommentSidebarV2FilterDropdownContentListItemLabel />
  <VeltCommentSidebarV2FilterDropdownContentListItemCount />
</VeltCommentSidebarV2FilterDropdownContentListItem>

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-item-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-item-label-v2></velt-comment-sidebar-filter-dropdown-content-list-item-label-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-item-count-v2></velt-comment-sidebar-filter-dropdown-content-list-item-count-v2>
</velt-comment-sidebar-filter-dropdown-content-list-item-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListItemIndicator

Visual indicator (such as a checkbox or icon) showing the active state of a filter option.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListItemIndicator />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListItemLabel

Text label for a filter option.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListItemLabel />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-item-label-v2></velt-comment-sidebar-filter-dropdown-content-list-item-label-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListItemCount

Count of matching comments shown alongside a filter option.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListItemCount />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-item-count-v2></velt-comment-sidebar-filter-dropdown-content-list-item-count-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListCategory

Group container for organizing filter options into categories.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListCategory>
  <VeltCommentSidebarV2FilterDropdownContentListCategoryLabel />
  <VeltCommentSidebarV2FilterDropdownContentListCategoryContent />
</VeltCommentSidebarV2FilterDropdownContentListCategory>

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-category-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-category-label-v2></velt-comment-sidebar-filter-dropdown-content-list-category-label-v2>
  <velt-comment-sidebar-filter-dropdown-content-list-category-content-v2></velt-comment-sidebar-filter-dropdown-content-list-category-content-v2>
</velt-comment-sidebar-filter-dropdown-content-list-category-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListCategoryLabel

Text label for a filter category.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListCategoryLabel />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-category-label-v2></velt-comment-sidebar-filter-dropdown-content-list-category-label-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FilterDropdownContentListCategoryContent

Content area within a filter category, rendering the category’s filter items.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FilterDropdownContentListCategoryContent />

Props: No additional props.

<velt-comment-sidebar-filter-dropdown-content-list-category-content-v2></velt-comment-sidebar-filter-dropdown-content-list-category-content-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2List

Scrollable list of comment threads. Uses CDK virtual scroll to render only the visible viewport slice, enabling smooth performance on large comment sets.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2List>
  <VeltCommentSidebarV2ListGroupHeader />
  <VeltCommentSidebarV2ListItem />
</VeltCommentSidebarV2List>

Props: No additional props.

<velt-comment-sidebar-list-v2>
  <velt-comment-sidebar-list-group-header-v2></velt-comment-sidebar-list-group-header-v2>
  <velt-comment-sidebar-list-item-v2></velt-comment-sidebar-list-item-v2>
</velt-comment-sidebar-list-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2ListGroupHeader

Group header rendered inside the list to label and separate grouped comment threads.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListGroupHeader>
  <VeltCommentSidebarV2ListGroupHeaderLabel />
  <VeltCommentSidebarV2ListGroupHeaderCount />
  <VeltCommentSidebarV2ListGroupHeaderChevron />
  <VeltCommentSidebarV2ListGroupHeaderSeparator />
</VeltCommentSidebarV2ListGroupHeader>

Props: No additional props.

<velt-comment-sidebar-list-group-header-v2>
  <velt-comment-sidebar-list-group-header-v2-label></velt-comment-sidebar-list-group-header-v2-label>
  <velt-comment-sidebar-list-group-header-v2-count></velt-comment-sidebar-list-group-header-v2-count>
  <velt-comment-sidebar-list-group-header-v2-chevron></velt-comment-sidebar-list-group-header-v2-chevron>
  <velt-comment-sidebar-list-group-header-v2-separator></velt-comment-sidebar-list-group-header-v2-separator>
</velt-comment-sidebar-list-group-header-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2ListGroupHeaderLabel

Label text for a list group header.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListGroupHeaderLabel />

Props: No additional props.

<velt-comment-sidebar-list-group-header-v2-label></velt-comment-sidebar-list-group-header-v2-label>

Attributes: No additional attributes.

VeltCommentSidebarV2ListGroupHeaderCount

Count of comments within a list group.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListGroupHeaderCount />

Props: No additional props.

<velt-comment-sidebar-list-group-header-v2-count></velt-comment-sidebar-list-group-header-v2-count>

Attributes: No additional attributes.

VeltCommentSidebarV2ListGroupHeaderChevron

Chevron indicating the expanded/collapsed state of a list group.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListGroupHeaderChevron />

Props: No additional props.

<velt-comment-sidebar-list-group-header-v2-chevron></velt-comment-sidebar-list-group-header-v2-chevron>

Attributes: No additional attributes.

VeltCommentSidebarV2ListGroupHeaderSeparator

Separator rendered between list group headers.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListGroupHeaderSeparator />

Props: No additional props.

<velt-comment-sidebar-list-group-header-v2-separator></velt-comment-sidebar-list-group-header-v2-separator>

Attributes: No additional attributes.

VeltCommentSidebarV2ListItem

Individual comment thread item rendered within the list.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ListItem />

Props: No additional props.

<velt-comment-sidebar-list-item-v2></velt-comment-sidebar-list-item-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2EmptyPlaceholder

Placeholder displayed when no comments match the current filter or when the sidebar has no comments. Contains an optional reset-filter button.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2EmptyPlaceholder>
  <VeltCommentSidebarV2ResetFilterButton />
</VeltCommentSidebarV2EmptyPlaceholder>

Props: No additional props.

<velt-comment-sidebar-empty-placeholder-v2>
  <velt-comment-sidebar-reset-filter-button-v2></velt-comment-sidebar-reset-filter-button-v2>
</velt-comment-sidebar-empty-placeholder-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2ResetFilterButton

Button that clears all active filters, returning the sidebar to its unfiltered state.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2ResetFilterButton />

Props: No additional props.

<velt-comment-sidebar-reset-filter-button-v2></velt-comment-sidebar-reset-filter-button-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2PageModeComposer

Composer for creating new page-level comments directly from the sidebar. Only visible when pageMode is enabled.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2PageModeComposer />

Props: No additional props.

<velt-comment-sidebar-page-mode-composer-v2></velt-comment-sidebar-page-mode-composer-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FocusedThread

Container for the focused-thread view that opens when a comment is clicked with focusedThreadMode enabled. Contains a back button and the dialog container.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FocusedThread>
  <VeltCommentSidebarV2FocusedThreadBackButton />
  <VeltCommentSidebarV2FocusedThreadDialogContainer />
</VeltCommentSidebarV2FocusedThread>

Props: No additional props.

<velt-comment-sidebar-focused-thread-v2>
  <velt-comment-sidebar-focused-thread-back-button-v2></velt-comment-sidebar-focused-thread-back-button-v2>
  <velt-comment-sidebar-focused-thread-dialog-container-v2></velt-comment-sidebar-focused-thread-dialog-container-v2>
</velt-comment-sidebar-focused-thread-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FocusedThreadBackButton

Back button that exits the focused-thread view and returns to the comment list.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FocusedThreadBackButton />

Props: No additional props.

<velt-comment-sidebar-focused-thread-back-button-v2></velt-comment-sidebar-focused-thread-back-button-v2>

Attributes: No additional attributes.

VeltCommentSidebarV2FocusedThreadDialogContainer

Container that renders the full comment dialog for the focused thread.

React / Next.js
Other Frameworks

<VeltCommentSidebarV2FocusedThreadDialogContainer />

Props: No additional props.

<velt-comment-sidebar-focused-thread-dialog-container-v2></velt-comment-sidebar-focused-thread-dialog-container-v2>

Attributes: No additional attributes.

Component Map

All 56 primitives and their corresponding HTML elements:

React Component	HTML Element
`VeltCommentsSidebarV2`	`velt-comments-sidebar-v2`
`VeltCommentSidebarV2Skeleton`	`velt-comment-sidebar-skeleton-v2`
`VeltCommentSidebarV2Panel`	`velt-comment-sidebar-panel-v2`
`VeltCommentSidebarV2Header`	`velt-comment-sidebar-header-v2`
`VeltCommentSidebarV2CloseButton`	`velt-comment-sidebar-close-button-v2`
`VeltCommentSidebarV2FullscreenButton`	`velt-comment-sidebar-fullscreen-button-v2`
`VeltCommentSidebarV2Search`	`velt-comment-sidebar-search-v2`
`VeltCommentSidebarV2SearchIcon`	`velt-comment-sidebar-search-v2-icon`
`VeltCommentSidebarV2SearchInput`	`velt-comment-sidebar-search-v2-input`
`VeltCommentSidebarV2FilterButton`	`velt-comment-sidebar-filter-button-v2`
`VeltCommentSidebarV2FilterButtonAppliedIcon`	`velt-comment-sidebar-filter-button-v2-applied-icon`
`VeltCommentSidebarV2FilterContainer`	`velt-comment-sidebar-filter-container-v2`
`VeltCommentSidebarV2FilterContainerTitle`	`velt-comment-sidebar-filter-container-v2-title`
`VeltCommentSidebarV2FilterContainerCloseButton`	`velt-comment-sidebar-filter-container-v2-close-button`
`VeltCommentSidebarV2FilterContainerApplyButton`	`velt-comment-sidebar-filter-container-v2-apply-button`
`VeltCommentSidebarV2FilterContainerResetButton`	`velt-comment-sidebar-filter-container-v2-reset-button`
`VeltCommentSidebarV2FilterContainerGroupBy`	`velt-comment-sidebar-filter-container-v2-group-by`
`VeltCommentSidebarV2FilterContainerSectionList`	`velt-comment-sidebar-filter-container-v2-section-list`
`VeltCommentSidebarV2FilterContainerSection`	`velt-comment-sidebar-filter-container-v2-section`
`VeltCommentSidebarV2FilterContainerSectionLabel`	`velt-comment-sidebar-filter-container-v2-section-label`
`VeltCommentSidebarV2FilterContainerSectionField`	`velt-comment-sidebar-filter-container-v2-section-field`
`VeltCommentSidebarV2FilterContainerSectionControl`	`velt-comment-sidebar-filter-container-v2-section-control`
`VeltCommentSidebarV2FilterContainerSectionControlChevron`	`velt-comment-sidebar-filter-container-v2-section-control-chevron`
`VeltCommentSidebarV2FilterContainerSectionControlValue`	`velt-comment-sidebar-filter-container-v2-section-control-value`
`VeltCommentSidebarV2FilterContainerSectionControlChipList`	`velt-comment-sidebar-filter-container-v2-section-control-chip-list`
`VeltCommentSidebarV2FilterContainerSectionControlChip`	`velt-comment-sidebar-filter-container-v2-section-control-chip`
`VeltCommentSidebarV2FilterContainerSectionControlSearch`	`velt-comment-sidebar-filter-container-v2-section-control-search`
`VeltCommentSidebarV2FilterContainerSectionOptionList`	`velt-comment-sidebar-filter-container-v2-section-option-list`
`VeltCommentSidebarV2FilterContainerSectionOption`	`velt-comment-sidebar-filter-container-v2-section-option`
`VeltCommentSidebarV2FilterContainerSectionOptionCheckbox`	`velt-comment-sidebar-filter-container-v2-section-option-checkbox`
`VeltCommentSidebarV2FilterContainerSectionOptionName`	`velt-comment-sidebar-filter-container-v2-section-option-name`
`VeltCommentSidebarV2FilterContainerSectionOptionCount`	`velt-comment-sidebar-filter-container-v2-section-option-count`
`VeltCommentSidebarV2FilterDropdown`	`velt-comment-sidebar-filter-dropdown-v2`
`VeltCommentSidebarV2FilterDropdownTrigger`	`velt-comment-sidebar-filter-dropdown-trigger-v2`
`VeltCommentSidebarV2FilterDropdownContent`	`velt-comment-sidebar-filter-dropdown-content-v2`
`VeltCommentSidebarV2FilterDropdownContentList`	`velt-comment-sidebar-filter-dropdown-content-list-v2`
`VeltCommentSidebarV2FilterDropdownContentListItem`	`velt-comment-sidebar-filter-dropdown-content-list-item-v2`
`VeltCommentSidebarV2FilterDropdownContentListItemIndicator`	`velt-comment-sidebar-filter-dropdown-content-list-item-indicator-v2`
`VeltCommentSidebarV2FilterDropdownContentListItemLabel`	`velt-comment-sidebar-filter-dropdown-content-list-item-label-v2`
`VeltCommentSidebarV2FilterDropdownContentListItemCount`	`velt-comment-sidebar-filter-dropdown-content-list-item-count-v2`
`VeltCommentSidebarV2FilterDropdownContentListCategory`	`velt-comment-sidebar-filter-dropdown-content-list-category-v2`
`VeltCommentSidebarV2FilterDropdownContentListCategoryLabel`	`velt-comment-sidebar-filter-dropdown-content-list-category-label-v2`
`VeltCommentSidebarV2FilterDropdownContentListCategoryContent`	`velt-comment-sidebar-filter-dropdown-content-list-category-content-v2`
`VeltCommentSidebarV2List`	`velt-comment-sidebar-list-v2`
`VeltCommentSidebarV2ListGroupHeader`	`velt-comment-sidebar-list-group-header-v2`
`VeltCommentSidebarV2ListGroupHeaderLabel`	`velt-comment-sidebar-list-group-header-v2-label`
`VeltCommentSidebarV2ListGroupHeaderCount`	`velt-comment-sidebar-list-group-header-v2-count`
`VeltCommentSidebarV2ListGroupHeaderChevron`	`velt-comment-sidebar-list-group-header-v2-chevron`
`VeltCommentSidebarV2ListGroupHeaderSeparator`	`velt-comment-sidebar-list-group-header-v2-separator`
`VeltCommentSidebarV2ListItem`	`velt-comment-sidebar-list-item-v2`
`VeltCommentSidebarV2EmptyPlaceholder`	`velt-comment-sidebar-empty-placeholder-v2`
`VeltCommentSidebarV2ResetFilterButton`	`velt-comment-sidebar-reset-filter-button-v2`
`VeltCommentSidebarV2PageModeComposer`	`velt-comment-sidebar-page-mode-composer-v2`
`VeltCommentSidebarV2FocusedThread`	`velt-comment-sidebar-focused-thread-v2`
`VeltCommentSidebarV2FocusedThreadBackButton`	`velt-comment-sidebar-focused-thread-back-button-v2`
`VeltCommentSidebarV2FocusedThreadDialogContainer`	`velt-comment-sidebar-focused-thread-dialog-container-v2`

Comment Sidebar Wireframe Variables Comments Sidebar Button Wireframes

⌘I

​Overview

​Usage Patterns

​Pattern 1: Drop-in Replacement

​Pattern 2: Version Prop on Existing Sidebar

​Pattern 3: Compose from Primitives

​Components

​VeltCommentsSidebarV2

​VeltCommentSidebarV2Skeleton

​VeltCommentSidebarV2Panel

​VeltCommentSidebarV2Header

​VeltCommentSidebarV2CloseButton

​VeltCommentSidebarV2FullscreenButton

​VeltCommentSidebarV2Search

​VeltCommentSidebarV2SearchIcon

​VeltCommentSidebarV2SearchInput

​VeltCommentSidebarV2FilterButton

​VeltCommentSidebarV2FilterButtonAppliedIcon

​VeltCommentSidebarV2FilterContainer

​VeltCommentSidebarV2FilterContainerTitle

​VeltCommentSidebarV2FilterContainerCloseButton

​VeltCommentSidebarV2FilterContainerApplyButton

​VeltCommentSidebarV2FilterContainerResetButton

​VeltCommentSidebarV2FilterContainerGroupBy

​VeltCommentSidebarV2FilterContainerSectionList

​VeltCommentSidebarV2FilterContainerSection

​VeltCommentSidebarV2FilterContainerSectionLabel

​VeltCommentSidebarV2FilterContainerSectionField

​VeltCommentSidebarV2FilterContainerSectionControl

​VeltCommentSidebarV2FilterContainerSectionControlChevron

​VeltCommentSidebarV2FilterContainerSectionControlValue

​VeltCommentSidebarV2FilterContainerSectionControlChipList

​VeltCommentSidebarV2FilterContainerSectionControlChip

​VeltCommentSidebarV2FilterContainerSectionControlSearch

​VeltCommentSidebarV2FilterContainerSectionOptionList

​VeltCommentSidebarV2FilterContainerSectionOption

​VeltCommentSidebarV2FilterContainerSectionOptionCheckbox

​VeltCommentSidebarV2FilterContainerSectionOptionName

​VeltCommentSidebarV2FilterContainerSectionOptionCount

​VeltCommentSidebarV2FilterDropdown

​VeltCommentSidebarV2FilterDropdownTrigger

​VeltCommentSidebarV2FilterDropdownContent

​VeltCommentSidebarV2FilterDropdownContentList

​VeltCommentSidebarV2FilterDropdownContentListItem

​VeltCommentSidebarV2FilterDropdownContentListItemIndicator

​VeltCommentSidebarV2FilterDropdownContentListItemLabel

​VeltCommentSidebarV2FilterDropdownContentListItemCount

​VeltCommentSidebarV2FilterDropdownContentListCategory

​VeltCommentSidebarV2FilterDropdownContentListCategoryLabel

​VeltCommentSidebarV2FilterDropdownContentListCategoryContent

​VeltCommentSidebarV2List

​VeltCommentSidebarV2ListGroupHeader

​VeltCommentSidebarV2ListGroupHeaderLabel

​VeltCommentSidebarV2ListGroupHeaderCount

​VeltCommentSidebarV2ListGroupHeaderChevron

​VeltCommentSidebarV2ListGroupHeaderSeparator

​VeltCommentSidebarV2ListItem

​VeltCommentSidebarV2EmptyPlaceholder

​VeltCommentSidebarV2ResetFilterButton

​VeltCommentSidebarV2PageModeComposer

​VeltCommentSidebarV2FocusedThread

​VeltCommentSidebarV2FocusedThreadBackButton

​VeltCommentSidebarV2FocusedThreadDialogContainer

​Component Map

Overview

Usage Patterns

Pattern 1: Drop-in Replacement

Pattern 2: Version Prop on Existing Sidebar

Pattern 3: Compose from Primitives

Components

VeltCommentsSidebarV2

VeltCommentSidebarV2Skeleton

VeltCommentSidebarV2Panel

VeltCommentSidebarV2Header

VeltCommentSidebarV2CloseButton

VeltCommentSidebarV2FullscreenButton

VeltCommentSidebarV2Search

VeltCommentSidebarV2SearchIcon

VeltCommentSidebarV2SearchInput

VeltCommentSidebarV2FilterButton

VeltCommentSidebarV2FilterButtonAppliedIcon

VeltCommentSidebarV2FilterContainer

VeltCommentSidebarV2FilterContainerTitle

VeltCommentSidebarV2FilterContainerCloseButton

VeltCommentSidebarV2FilterContainerApplyButton

VeltCommentSidebarV2FilterContainerResetButton

VeltCommentSidebarV2FilterContainerGroupBy

VeltCommentSidebarV2FilterContainerSectionList

VeltCommentSidebarV2FilterContainerSection

VeltCommentSidebarV2FilterContainerSectionLabel

VeltCommentSidebarV2FilterContainerSectionField

VeltCommentSidebarV2FilterContainerSectionControl

VeltCommentSidebarV2FilterContainerSectionControlChevron

VeltCommentSidebarV2FilterContainerSectionControlValue

VeltCommentSidebarV2FilterContainerSectionControlChipList

VeltCommentSidebarV2FilterContainerSectionControlChip

VeltCommentSidebarV2FilterContainerSectionControlSearch

VeltCommentSidebarV2FilterContainerSectionOptionList

VeltCommentSidebarV2FilterContainerSectionOption

VeltCommentSidebarV2FilterContainerSectionOptionCheckbox

VeltCommentSidebarV2FilterContainerSectionOptionName

VeltCommentSidebarV2FilterContainerSectionOptionCount

VeltCommentSidebarV2FilterDropdown

VeltCommentSidebarV2FilterDropdownTrigger

VeltCommentSidebarV2FilterDropdownContent

VeltCommentSidebarV2FilterDropdownContentList

VeltCommentSidebarV2FilterDropdownContentListItem

VeltCommentSidebarV2FilterDropdownContentListItemIndicator

VeltCommentSidebarV2FilterDropdownContentListItemLabel

VeltCommentSidebarV2FilterDropdownContentListItemCount

VeltCommentSidebarV2FilterDropdownContentListCategory

VeltCommentSidebarV2FilterDropdownContentListCategoryLabel

VeltCommentSidebarV2FilterDropdownContentListCategoryContent

VeltCommentSidebarV2List

VeltCommentSidebarV2ListGroupHeader

VeltCommentSidebarV2ListGroupHeaderLabel

VeltCommentSidebarV2ListGroupHeaderCount

VeltCommentSidebarV2ListGroupHeaderChevron

VeltCommentSidebarV2ListGroupHeaderSeparator

VeltCommentSidebarV2ListItem

VeltCommentSidebarV2EmptyPlaceholder

VeltCommentSidebarV2ResetFilterButton

VeltCommentSidebarV2PageModeComposer

VeltCommentSidebarV2FocusedThread

VeltCommentSidebarV2FocusedThreadBackButton

VeltCommentSidebarV2FocusedThreadDialogContainer

Component Map