Comment Sidebar v2 Wireframes

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

Overview

React / Next.js
Other Frameworks

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

<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
Other Frameworks

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

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

Panel

React / Next.js
Other Frameworks

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

<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
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Header>
    <VeltCommentsSidebarV2Wireframe.CloseButton />
    <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown />
  </VeltCommentsSidebarV2Wireframe.Header>
</VeltWireframe>

<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-minimal-actions-dropdown-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-v2-wireframe>
    <velt-comments-sidebar-filter-dropdown-v2-wireframe></velt-comments-sidebar-filter-dropdown-v2-wireframe>
  </velt-comments-sidebar-header-v2-wireframe>
</velt-wireframe>

CloseButton (Panel Header)

React / Next.js
Other Frameworks

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

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

MinimalActionsDropdown (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown>
    <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Trigger />
    <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content>
      <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllRead />
      <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllResolved />
    </VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content>
  </VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown>
</VeltWireframe>

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-minimal-actions-dropdown-v2-wireframe>
    <velt-comments-sidebar-minimal-actions-dropdown-trigger-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-trigger-v2-wireframe>
    <velt-comments-sidebar-minimal-actions-dropdown-content-v2-wireframe>
      <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe>
      <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe>
    </velt-comments-sidebar-minimal-actions-dropdown-content-v2-wireframe>
  </velt-comments-sidebar-minimal-actions-dropdown-v2-wireframe>
</velt-wireframe>

Trigger (Panel Header MinimalActionsDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Trigger />
</VeltWireframe>

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

Content (Panel Header MinimalActionsDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content>
    <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllRead />
    <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllResolved />
  </VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content>
</VeltWireframe>

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-minimal-actions-dropdown-content-v2-wireframe>
    <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe>
    <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe>
  </velt-comments-sidebar-minimal-actions-dropdown-content-v2-wireframe>
</velt-wireframe>

MarkAllRead (Panel Header MinimalActionsDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllRead />
</VeltWireframe>

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe>
</velt-wireframe>

MarkAllResolved (Panel Header MinimalActionsDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllResolved />
</VeltWireframe>

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe>
</velt-wireframe>

FilterDropdown (Panel Header)

React / Next.js
Other Frameworks

<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>
        <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
        </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
      </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
    </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
  </VeltCommentsSidebarV2Wireframe.FilterDropdown>
</VeltWireframe>

<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-v2-wireframe>
        <velt-comments-sidebar-filter-dropdown-content-list-category-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>

Trigger (Panel Header FilterDropdown)

React / Next.js
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

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

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

Item (Panel Header FilterDropdown Content List)

React / Next.js
Other Frameworks

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

<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-v2-wireframe>
</velt-wireframe>

Indicator (Panel Header FilterDropdown Content List Item)

React / Next.js
Other Frameworks

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

<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
Other Frameworks

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

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

Category (Panel Header FilterDropdown Content List)

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-filter-dropdown-content-list-category-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
Other Frameworks

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

<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
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.List />
</VeltWireframe>

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

EmptyPlaceholder (Panel)

React / Next.js
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

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

<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
Other Frameworks

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

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

​Overview

​Skeleton

​Panel

​Header (Panel)

​CloseButton (Panel Header)

​MinimalActionsDropdown (Panel Header)

Trigger (Panel Header MinimalActionsDropdown)

Content (Panel Header MinimalActionsDropdown)

​FilterDropdown (Panel Header)

Trigger (Panel Header FilterDropdown)

Content (Panel Header FilterDropdown)

​List (Panel)

​EmptyPlaceholder (Panel)

​ResetFilterButton (Panel EmptyPlaceholder)

​PageModeComposer (Panel)

​FocusedThread (Panel)

​BackButton (Panel FocusedThread)

​DialogContainer (Panel FocusedThread)

Overview

Skeleton

Panel

Header (Panel)

CloseButton (Panel Header)

MinimalActionsDropdown (Panel Header)

FilterDropdown (Panel Header)

List (Panel)

EmptyPlaceholder (Panel)

ResetFilterButton (Panel EmptyPlaceholder)

PageModeComposer (Panel)

FocusedThread (Panel)

BackButton (Panel FocusedThread)

DialogContainer (Panel FocusedThread)