Comment Sidebar v2 Wireframes

Comment Sidebar V2 Component — primitive-based wireframe with 27+ standalone primitives.

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

Overview

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe>
    <VeltCommentsSidebarV2Wireframe.Skeleton />
    <VeltCommentsSidebarV2Wireframe.Panel />
  </VeltCommentsSidebarV2Wireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-v2-wireframe>
    <velt-comments-sidebar-skeleton-v2-wireframe></velt-comments-sidebar-skeleton-v2-wireframe>
    <velt-comments-sidebar-panel-v2-wireframe></velt-comments-sidebar-panel-v2-wireframe>
  </velt-comments-sidebar-v2-wireframe>
</velt-wireframe>

Skeleton

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Skeleton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-skeleton-v2-wireframe></velt-comments-sidebar-skeleton-v2-wireframe>
</velt-wireframe>

Panel

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Panel>
    <VeltCommentsSidebarV2Wireframe.Header />
    <VeltCommentsSidebarV2Wireframe.List />
    <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder />
    <VeltCommentsSidebarV2Wireframe.PageModeComposer />
    <VeltCommentsSidebarV2Wireframe.FocusedThread />
  </VeltCommentsSidebarV2Wireframe.Panel>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-panel-v2-wireframe>
    <velt-comments-sidebar-header-v2-wireframe></velt-comments-sidebar-header-v2-wireframe>
    <velt-comments-sidebar-list-v2-wireframe></velt-comments-sidebar-list-v2-wireframe>
    <velt-comments-sidebar-empty-placeholder-v2-wireframe></velt-comments-sidebar-empty-placeholder-v2-wireframe>
    <velt-comments-sidebar-page-mode-composer-v2-wireframe></velt-comments-sidebar-page-mode-composer-v2-wireframe>
    <velt-comments-sidebar-focused-thread-v2-wireframe></velt-comments-sidebar-focused-thread-v2-wireframe>
  </velt-comments-sidebar-panel-v2-wireframe>
</velt-wireframe>

Header (Panel)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Header>
    <VeltCommentsSidebarV2Wireframe.CloseButton />
    <VeltCommentsSidebarV2Wireframe.Search>
      <VeltCommentsSidebarV2Wireframe.Search.Icon />
      <VeltCommentsSidebarV2Wireframe.Search.Input />
    </VeltCommentsSidebarV2Wireframe.Search>
    <VeltCommentsSidebarV2Wireframe.FilterButton>
      <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
    </VeltCommentsSidebarV2Wireframe.FilterButton>
    <VeltCommentsSidebarV2Wireframe.FilterContainer />
    <VeltCommentsSidebarV2Wireframe.FullscreenButton />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown />
  </VeltCommentsSidebarV2Wireframe.Header>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-header-v2-wireframe>
    <velt-comments-sidebar-close-button-v2-wireframe></velt-comments-sidebar-close-button-v2-wireframe>
    <velt-comments-sidebar-search-v2-wireframe>
      <velt-comments-sidebar-search-v2-icon-wireframe></velt-comments-sidebar-search-v2-icon-wireframe>
      <velt-comments-sidebar-search-v2-input-wireframe></velt-comments-sidebar-search-v2-input-wireframe>
    </velt-comments-sidebar-search-v2-wireframe>
    <velt-comments-sidebar-filter-button-v2-wireframe>
      <velt-comments-sidebar-filter-button-v2-applied-icon-wireframe></velt-comments-sidebar-filter-button-v2-applied-icon-wireframe>
    </velt-comments-sidebar-filter-button-v2-wireframe>
    <velt-comments-sidebar-filter-container-v2-wireframe></velt-comments-sidebar-filter-container-v2-wireframe>
    <velt-comments-sidebar-fullscreen-button-v2-wireframe></velt-comments-sidebar-fullscreen-button-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-v2-wireframe></velt-comments-sidebar-filter-dropdown-v2-wireframe>
  </velt-comments-sidebar-header-v2-wireframe>
</velt-wireframe>

The FilterContainer is the Main Filter bottom-sheet/menu surface; the FilterDropdown is the header dropdown that renders mini-filter, sort, quick, and combined actions content depending on its configured type. The actions dropdown replaces the removed minimal-actions dropdown.

CloseButton (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.CloseButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-close-button-v2-wireframe></velt-comments-sidebar-close-button-v2-wireframe>
</velt-wireframe>

Search (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search>
    <VeltCommentsSidebarV2Wireframe.Search.Icon />
    <VeltCommentsSidebarV2Wireframe.Search.Input />
  </VeltCommentsSidebarV2Wireframe.Search>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-search-v2-wireframe>
    <velt-comments-sidebar-search-v2-icon-wireframe></velt-comments-sidebar-search-v2-icon-wireframe>
    <velt-comments-sidebar-search-v2-input-wireframe></velt-comments-sidebar-search-v2-input-wireframe>
  </velt-comments-sidebar-search-v2-wireframe>
</velt-wireframe>

Icon (Panel Header Search)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search.Icon />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-search-v2-icon-wireframe></velt-comments-sidebar-search-v2-icon-wireframe>
</velt-wireframe>

Input (Panel Header Search)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search.Input />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-search-v2-input-wireframe></velt-comments-sidebar-search-v2-input-wireframe>
</velt-wireframe>

FilterButton (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterButton>
    <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
  </VeltCommentsSidebarV2Wireframe.FilterButton>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-button-v2-wireframe>
    <velt-comments-sidebar-filter-button-v2-applied-icon-wireframe></velt-comments-sidebar-filter-button-v2-applied-icon-wireframe>
  </velt-comments-sidebar-filter-button-v2-wireframe>
</velt-wireframe>

The FilterButton opens the Main Filter container. Bind appliedCount and isFilterActive on its child wireframes to surface the active-filter state.

AppliedIcon (Panel Header FilterButton)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-button-v2-applied-icon-wireframe></velt-comments-sidebar-filter-button-v2-applied-icon-wireframe>
</velt-wireframe>

FilterContainer (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.Title />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton />
  </VeltCommentsSidebarV2Wireframe.FilterContainer>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-wireframe>
    <velt-comments-sidebar-filter-container-v2-title-wireframe></velt-comments-sidebar-filter-container-v2-title-wireframe>
    <velt-comments-sidebar-filter-container-v2-group-by-wireframe></velt-comments-sidebar-filter-container-v2-group-by-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-list-wireframe></velt-comments-sidebar-filter-container-v2-section-list-wireframe>
    <velt-comments-sidebar-filter-container-v2-reset-button-wireframe></velt-comments-sidebar-filter-container-v2-reset-button-wireframe>
    <velt-comments-sidebar-filter-container-v2-apply-button-wireframe></velt-comments-sidebar-filter-container-v2-apply-button-wireframe>
    <velt-comments-sidebar-filter-container-v2-close-button-wireframe></velt-comments-sidebar-filter-container-v2-close-button-wireframe>
  </velt-comments-sidebar-filter-container-v2-wireframe>
</velt-wireframe>

The Main Filter container is the bottom-sheet/menu filter surface. GroupBy renders only when grouping is enabled (groupingEnabled); bind groupByOptions for its options. Available data variables on these wireframes include value, label, count, mode, selected, group, groupingEnabled, groupByOptions, chips, searchable, placeholder, isFilterActive, and appliedCount.

Title (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.Title />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-title-wireframe></velt-comments-sidebar-filter-container-v2-title-wireframe>
</velt-wireframe>

GroupBy (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-group-by-wireframe></velt-comments-sidebar-filter-container-v2-group-by-wireframe>
</velt-wireframe>

SectionList (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
        <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
          </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch />
        </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
        <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
          </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
        </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
      </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
    </VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-list-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-wireframe>
      <velt-comments-sidebar-filter-container-v2-section-label-wireframe></velt-comments-sidebar-filter-container-v2-section-label-wireframe>
      <velt-comments-sidebar-filter-container-v2-section-field-wireframe>
        <velt-comments-sidebar-filter-container-v2-section-control-wireframe>
          <velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe>
          <velt-comments-sidebar-filter-container-v2-section-control-value-wireframe></velt-comments-sidebar-filter-container-v2-section-control-value-wireframe>
          <velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
            <velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe>
          </velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
          <velt-comments-sidebar-filter-container-v2-section-control-search-wireframe></velt-comments-sidebar-filter-container-v2-section-control-search-wireframe>
        </velt-comments-sidebar-filter-container-v2-section-control-wireframe>
        <velt-comments-sidebar-filter-container-v2-section-option-list-wireframe>
          <velt-comments-sidebar-filter-container-v2-section-option-wireframe>
            <velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe></velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe>
            <velt-comments-sidebar-filter-container-v2-section-option-name-wireframe></velt-comments-sidebar-filter-container-v2-section-option-name-wireframe>
            <velt-comments-sidebar-filter-container-v2-section-option-count-wireframe></velt-comments-sidebar-filter-container-v2-section-option-count-wireframe>
          </velt-comments-sidebar-filter-container-v2-section-option-wireframe>
        </velt-comments-sidebar-filter-container-v2-section-option-list-wireframe>
      </velt-comments-sidebar-filter-container-v2-section-field-wireframe>
    </velt-comments-sidebar-filter-container-v2-section-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-list-wireframe>
</velt-wireframe>

SectionControl, SectionControlSearch, SectionOptionList, and SectionField accept a searchable boolean input that toggles the per-section search box. Bind dynamic data (value, label, count, selected, chips, placeholder) on the leaf wireframe, not its container — bindings update live only when bound to a signal on the leaf.

Section (Panel Header FilterContainer SectionList)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-label-wireframe></velt-comments-sidebar-filter-container-v2-section-label-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-field-wireframe></velt-comments-sidebar-filter-container-v2-section-field-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-wireframe>
</velt-wireframe>

SectionLabel (Panel Header FilterContainer Section)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-label-wireframe></velt-comments-sidebar-filter-container-v2-section-label-wireframe>
</velt-wireframe>

SectionField (Panel Header FilterContainer Section)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-field-wireframe searchable="true">
    <velt-comments-sidebar-filter-container-v2-section-control-wireframe></velt-comments-sidebar-filter-container-v2-section-control-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-option-list-wireframe></velt-comments-sidebar-filter-container-v2-section-option-list-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-field-wireframe>
</velt-wireframe>

SectionControl (Panel Header FilterContainer SectionField)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
    </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-wireframe searchable="true">
    <velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-control-value-wireframe></velt-comments-sidebar-filter-container-v2-section-control-value-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
      <velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe>
    </velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-control-search-wireframe></velt-comments-sidebar-filter-container-v2-section-control-search-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-control-wireframe>
</velt-wireframe>

SectionControlChevron (Panel Header FilterContainer SectionControl)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe>
</velt-wireframe>

SectionControlValue (Panel Header FilterContainer SectionControl)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-value-wireframe></velt-comments-sidebar-filter-container-v2-section-control-value-wireframe>
</velt-wireframe>

SectionControlChipList (Panel Header FilterContainer SectionControl)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe>
</velt-wireframe>

SectionControlChip (Panel Header FilterContainer SectionControlChipList)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe></velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe>
</velt-wireframe>

SectionControlSearch (Panel Header FilterContainer SectionControl)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch searchable={true} />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-control-search-wireframe searchable="true"></velt-comments-sidebar-filter-container-v2-section-control-search-wireframe>
</velt-wireframe>

SectionOptionList (Panel Header FilterContainer SectionField)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-option-list-wireframe searchable="true">
    <velt-comments-sidebar-filter-container-v2-section-option-wireframe></velt-comments-sidebar-filter-container-v2-section-option-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-option-list-wireframe>
</velt-wireframe>

SectionOption (Panel Header FilterContainer SectionOptionList)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-option-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe></velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-option-name-wireframe></velt-comments-sidebar-filter-container-v2-section-option-name-wireframe>
    <velt-comments-sidebar-filter-container-v2-section-option-count-wireframe></velt-comments-sidebar-filter-container-v2-section-option-count-wireframe>
  </velt-comments-sidebar-filter-container-v2-section-option-wireframe>
</velt-wireframe>

SectionOptionCheckbox (Panel Header FilterContainer SectionOption)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe></velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe>
</velt-wireframe>

SectionOptionName (Panel Header FilterContainer SectionOption)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-option-name-wireframe></velt-comments-sidebar-filter-container-v2-section-option-name-wireframe>
</velt-wireframe>

SectionOptionCount (Panel Header FilterContainer SectionOption)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-section-option-count-wireframe></velt-comments-sidebar-filter-container-v2-section-option-count-wireframe>
</velt-wireframe>

ResetButton (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-reset-button-wireframe></velt-comments-sidebar-filter-container-v2-reset-button-wireframe>
</velt-wireframe>

ApplyButton (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-apply-button-wireframe></velt-comments-sidebar-filter-container-v2-apply-button-wireframe>
</velt-wireframe>

CloseButton (Panel Header FilterContainer)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-container-v2-close-button-wireframe></velt-comments-sidebar-filter-container-v2-close-button-wireframe>
</velt-wireframe>

FullscreenButton (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FullscreenButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-fullscreen-button-v2-wireframe></velt-comments-sidebar-fullscreen-button-v2-wireframe>
</velt-wireframe>

FilterDropdown (Panel Header)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
      <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
        <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
        </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
        <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
        </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
      </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
    </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
  </VeltCommentsSidebarV2Wireframe.FilterDropdown>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe></velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-v2-wireframe>
      <velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe>
        <velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe>
          <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe>
          <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe>
          <velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe>
        </velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe>
        <velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe>
          <velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe>
          <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe>
        </velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe>
      </velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe>
    </velt-comments-sidebar-filter-dropdown-content-v2-wireframe>
  </velt-comments-sidebar-filter-dropdown-v2-wireframe>
</velt-wireframe>

The FilterDropdown renders mini-filter, sort, quick, or combined actions content depending on its configured type. The CategoryLabel and per-item Count sub-slots are new in this release.

Trigger (Panel Header FilterDropdown)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe></velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe>
</velt-wireframe>

Content (Panel Header FilterDropdown)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe>
  </velt-comments-sidebar-filter-dropdown-content-v2-wireframe>
</velt-wireframe>

List (Panel Header FilterDropdown Content)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe>
  </velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe>
</velt-wireframe>

Label (Panel Header FilterDropdown Content List Category)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe>
</velt-wireframe>

Item (Panel Header FilterDropdown Content List)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe>
  </velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe>
</velt-wireframe>

Indicator (Panel Header FilterDropdown Content List Item)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe>
</velt-wireframe>

Label (Panel Header FilterDropdown Content List Item)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe>
</velt-wireframe>

Count (Panel Header FilterDropdown Content List Item)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe>
</velt-wireframe>

Category (Panel Header FilterDropdown Content List)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe>
  </velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe>
</velt-wireframe>

Content (Panel Header FilterDropdown Content List Category)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe>
</velt-wireframe>

List (Panel)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.List>
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader>
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
    </VeltCommentsSidebarV2Wireframe.ListGroupHeader>
  </VeltCommentsSidebarV2Wireframe.List>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-v2-wireframe>
    <velt-comments-sidebar-list-group-header-v2-wireframe>
      <velt-comments-sidebar-list-group-header-v2-label-wireframe></velt-comments-sidebar-list-group-header-v2-label-wireframe>
      <velt-comments-sidebar-list-group-header-v2-count-wireframe></velt-comments-sidebar-list-group-header-v2-count-wireframe>
      <velt-comments-sidebar-list-group-header-v2-chevron-wireframe></velt-comments-sidebar-list-group-header-v2-chevron-wireframe>
      <velt-comments-sidebar-list-group-header-v2-separator-wireframe></velt-comments-sidebar-list-group-header-v2-separator-wireframe>
    </velt-comments-sidebar-list-group-header-v2-wireframe>
  </velt-comments-sidebar-list-v2-wireframe>
</velt-wireframe>

The group header renders once per group when grouping is enabled. Bind group.label and group.count on the leaf wireframes to surface live group metadata.

ListGroupHeader (Panel List)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader>
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
  </VeltCommentsSidebarV2Wireframe.ListGroupHeader>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-group-header-v2-wireframe>
    <velt-comments-sidebar-list-group-header-v2-label-wireframe></velt-comments-sidebar-list-group-header-v2-label-wireframe>
    <velt-comments-sidebar-list-group-header-v2-count-wireframe></velt-comments-sidebar-list-group-header-v2-count-wireframe>
    <velt-comments-sidebar-list-group-header-v2-chevron-wireframe></velt-comments-sidebar-list-group-header-v2-chevron-wireframe>
    <velt-comments-sidebar-list-group-header-v2-separator-wireframe></velt-comments-sidebar-list-group-header-v2-separator-wireframe>
  </velt-comments-sidebar-list-group-header-v2-wireframe>
</velt-wireframe>

Label (Panel List ListGroupHeader)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-group-header-v2-label-wireframe></velt-comments-sidebar-list-group-header-v2-label-wireframe>
</velt-wireframe>

Count (Panel List ListGroupHeader)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-group-header-v2-count-wireframe></velt-comments-sidebar-list-group-header-v2-count-wireframe>
</velt-wireframe>

Chevron (Panel List ListGroupHeader)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-group-header-v2-chevron-wireframe></velt-comments-sidebar-list-group-header-v2-chevron-wireframe>
</velt-wireframe>

Separator (Panel List ListGroupHeader)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-list-group-header-v2-separator-wireframe></velt-comments-sidebar-list-group-header-v2-separator-wireframe>
</velt-wireframe>

EmptyPlaceholder (Panel)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder>
    <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton />
  </VeltCommentsSidebarV2Wireframe.EmptyPlaceholder>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-empty-placeholder-v2-wireframe>
    <velt-comments-sidebar-reset-filter-button-v2-wireframe></velt-comments-sidebar-reset-filter-button-v2-wireframe>
  </velt-comments-sidebar-empty-placeholder-v2-wireframe>
</velt-wireframe>

ResetFilterButton (Panel EmptyPlaceholder)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-reset-filter-button-v2-wireframe></velt-comments-sidebar-reset-filter-button-v2-wireframe>
</velt-wireframe>

PageModeComposer (Panel)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.PageModeComposer />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-page-mode-composer-v2-wireframe></velt-comments-sidebar-page-mode-composer-v2-wireframe>
</velt-wireframe>

FocusedThread (Panel)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread>
    <VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton />
    <VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer />
  </VeltCommentsSidebarV2Wireframe.FocusedThread>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-focused-thread-v2-wireframe>
    <velt-comments-sidebar-focused-thread-back-button-v2-wireframe></velt-comments-sidebar-focused-thread-back-button-v2-wireframe>
    <velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe></velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe>
  </velt-comments-sidebar-focused-thread-v2-wireframe>
</velt-wireframe>

BackButton (Panel FocusedThread)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-focused-thread-back-button-v2-wireframe></velt-comments-sidebar-focused-thread-back-button-v2-wireframe>
</velt-wireframe>

DialogContainer (Panel FocusedThread)

React / Next.js

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe></velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe>
</velt-wireframe>