> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Sidebar V2 Primitives

> 27+ primitive components for building custom Comment Sidebar V2 interfaces with maximum flexibility.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

The Comment Sidebar V2 Primitives API provides 27+ granular components that can be used independently to build completely custom sidebar interfaces. Unlike the V1 sidebar's monolithic structure, every section of the V2 sidebar is an independently importable and composable primitive. Each primitive can be used standalone or composed together for maximum customization flexibility.

Key features of the V2 architecture:

* **Flat primitive components** — each UI section is individually replaceable
* **Unified filter model** — replaces the legacy `minimalFilter` + `advancedFilters` system
* **CDK virtual scroll** — renders only the visible viewport slice for smooth performance on large comment sets
* **Focused-thread view** — opens individual threads in a dedicated view inside the sidebar
* **Conditional styling** — all primitives support `velt-class` conditional styling via `applyConditionalClasses`

## Usage Patterns

### Pattern 1: Drop-in Replacement

Use `VeltCommentsSidebarV2` as a direct replacement for `VeltCommentsSidebar`.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <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)}
    />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

### Pattern 2: Version Prop on Existing Sidebar

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebar version="2" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar version="2"></velt-comments-sidebar>
    ```
  </Tab>
</Tabs>

### Pattern 3: Compose from Primitives

Build a fully custom sidebar by composing individual primitives.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2>
      <VeltCommentsSidebarV2Skeleton />
      <VeltCommentsSidebarV2Panel>
        <VeltCommentsSidebarV2Header />
        <VeltCommentsSidebarV2List />
        <VeltCommentsSidebarV2EmptyPlaceholder />
        <VeltCommentsSidebarV2PageModeComposer />
        <VeltCommentsSidebarV2FocusedThread />
      </VeltCommentsSidebarV2Panel>
    </VeltCommentsSidebarV2>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-v2>
      <velt-comments-sidebar-skeleton-v2></velt-comments-sidebar-skeleton-v2>
      <velt-comments-sidebar-panel-v2>
        <velt-comments-sidebar-header-v2></velt-comments-sidebar-header-v2>
        <velt-comments-sidebar-list-v2></velt-comments-sidebar-list-v2>
        <velt-comments-sidebar-empty-placeholder-v2></velt-comments-sidebar-empty-placeholder-v2>
        <velt-comments-sidebar-page-mode-composer-v2></velt-comments-sidebar-page-mode-composer-v2>
        <velt-comments-sidebar-focused-thread-v2></velt-comments-sidebar-focused-thread-v2>
      </velt-comments-sidebar-panel-v2>
    </velt-comments-sidebar-v2>
    ```
  </Tab>
</Tabs>

## Components

### VeltCommentsSidebarV2

Root container for the V2 sidebar. Provides shared state context to all child primitives via `parentLocalUIState`. See [`VeltCommentsSidebarV2Props`](/api-reference/sdk/models/data-models#veltcommentssidebarv2props) for the type definition.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <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                |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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 |
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2Skeleton

Loading skeleton displayed while the sidebar content is loading.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2Skeleton />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-skeleton-v2></velt-comments-sidebar-skeleton-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2Panel

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2Panel>
      <VeltCommentsSidebarV2Header />
      <VeltCommentsSidebarV2List />
      <VeltCommentsSidebarV2EmptyPlaceholder />
      <VeltCommentsSidebarV2PageModeComposer />
      <VeltCommentsSidebarV2FocusedThread />
    </VeltCommentsSidebarV2Panel>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-panel-v2>
      <velt-comments-sidebar-header-v2></velt-comments-sidebar-header-v2>
      <velt-comments-sidebar-list-v2></velt-comments-sidebar-list-v2>
      <velt-comments-sidebar-empty-placeholder-v2></velt-comments-sidebar-empty-placeholder-v2>
      <velt-comments-sidebar-page-mode-composer-v2></velt-comments-sidebar-page-mode-composer-v2>
      <velt-comments-sidebar-focused-thread-v2></velt-comments-sidebar-focused-thread-v2>
    </velt-comments-sidebar-panel-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2Header

Header section of the sidebar panel. Contains the close button, minimal actions dropdown, and filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2Header>
      <VeltCommentsSidebarV2CloseButton />
      <VeltCommentsSidebarV2MinimalActionsDropdown />
      <VeltCommentsSidebarV2FilterDropdown />
    </VeltCommentsSidebarV2Header>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-header-v2>
      <velt-comments-sidebar-close-button-v2></velt-comments-sidebar-close-button-v2>
      <velt-comments-sidebar-minimal-actions-dropdown-v2></velt-comments-sidebar-minimal-actions-dropdown-v2>
      <velt-comments-sidebar-filter-dropdown-v2></velt-comments-sidebar-filter-dropdown-v2>
    </velt-comments-sidebar-header-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2CloseButton

Button to close the sidebar panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2CloseButton />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-close-button-v2></velt-comments-sidebar-close-button-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2MinimalActionsDropdown

Dropdown menu in the header providing bulk actions such as mark-all-read and mark-all-resolved.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2MinimalActionsDropdown>
      <VeltCommentsSidebarV2MinimalActionsDropdownTrigger />
      <VeltCommentsSidebarV2MinimalActionsDropdownContent>
        <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
        <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
      </VeltCommentsSidebarV2MinimalActionsDropdownContent>
    </VeltCommentsSidebarV2MinimalActionsDropdown>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-minimal-actions-dropdown-v2>
      <velt-comments-sidebar-minimal-actions-dropdown-trigger-v2></velt-comments-sidebar-minimal-actions-dropdown-trigger-v2>
      <velt-comments-sidebar-minimal-actions-dropdown-content-v2>
        <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2>
        <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2>
      </velt-comments-sidebar-minimal-actions-dropdown-content-v2>
    </velt-comments-sidebar-minimal-actions-dropdown-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2MinimalActionsDropdownTrigger

Trigger button that opens the minimal actions dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2MinimalActionsDropdownTrigger />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-minimal-actions-dropdown-trigger-v2></velt-comments-sidebar-minimal-actions-dropdown-trigger-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2MinimalActionsDropdownContent

Content container for the minimal actions dropdown menu items.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2MinimalActionsDropdownContent>
      <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
      <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
    </VeltCommentsSidebarV2MinimalActionsDropdownContent>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-minimal-actions-dropdown-content-v2>
      <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2>
      <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2>
    </velt-comments-sidebar-minimal-actions-dropdown-content-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead

Action item that marks all comments as read.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved

Action item that marks all comments as resolved.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2></velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdown

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdown>
      <VeltCommentsSidebarV2FilterDropdownTrigger />
      <VeltCommentsSidebarV2FilterDropdownContent>
        <VeltCommentsSidebarV2FilterDropdownContentList>
          <VeltCommentsSidebarV2FilterDropdownContentListItem>
            <VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
            <VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
          </VeltCommentsSidebarV2FilterDropdownContentListItem>
          <VeltCommentsSidebarV2FilterDropdownContentListCategory>
            <VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
          </VeltCommentsSidebarV2FilterDropdownContentListCategory>
        </VeltCommentsSidebarV2FilterDropdownContentList>
      </VeltCommentsSidebarV2FilterDropdownContent>
    </VeltCommentsSidebarV2FilterDropdown>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-v2>
      <velt-comments-sidebar-filter-dropdown-trigger-v2></velt-comments-sidebar-filter-dropdown-trigger-v2>
      <velt-comments-sidebar-filter-dropdown-content-v2>
        <velt-comments-sidebar-filter-dropdown-content-list-v2>
          <velt-comments-sidebar-filter-dropdown-content-list-item-v2>
            <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2>
            <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2>
          </velt-comments-sidebar-filter-dropdown-content-list-item-v2>
          <velt-comments-sidebar-filter-dropdown-content-list-category-v2>
            <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2>
          </velt-comments-sidebar-filter-dropdown-content-list-category-v2>
        </velt-comments-sidebar-filter-dropdown-content-list-v2>
      </velt-comments-sidebar-filter-dropdown-content-v2>
    </velt-comments-sidebar-filter-dropdown-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownTrigger

Trigger button that opens the filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownTrigger />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-trigger-v2></velt-comments-sidebar-filter-dropdown-trigger-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContent

Content container for the filter dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContent>
      <VeltCommentsSidebarV2FilterDropdownContentList />
    </VeltCommentsSidebarV2FilterDropdownContent>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-v2></velt-comments-sidebar-filter-dropdown-content-list-v2>
    </velt-comments-sidebar-filter-dropdown-content-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentList

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentList>
      <VeltCommentsSidebarV2FilterDropdownContentListItem />
      <VeltCommentsSidebarV2FilterDropdownContentListCategory />
    </VeltCommentsSidebarV2FilterDropdownContentList>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-item-v2></velt-comments-sidebar-filter-dropdown-content-list-item-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-category-v2></velt-comments-sidebar-filter-dropdown-content-list-category-v2>
    </velt-comments-sidebar-filter-dropdown-content-list-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentListItem

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentListItem>
      <VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
      <VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
    </VeltCommentsSidebarV2FilterDropdownContentListItem>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-item-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2>
    </velt-comments-sidebar-filter-dropdown-content-list-item-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentListItemIndicator

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentListItemIndicator />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2></velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentListItemLabel

Text label for a filter option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentListItemLabel />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-item-label-v2></velt-comments-sidebar-filter-dropdown-content-list-item-label-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentListCategory

Group container for organizing filter options into categories.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentListCategory>
      <VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
    </VeltCommentsSidebarV2FilterDropdownContentListCategory>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-category-v2>
      <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2>
    </velt-comments-sidebar-filter-dropdown-content-list-category-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FilterDropdownContentListCategoryContent

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FilterDropdownContentListCategoryContent />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-filter-dropdown-content-list-category-content-v2></velt-comments-sidebar-filter-dropdown-content-list-category-content-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2List

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2List />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-list-v2></velt-comments-sidebar-list-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2ListItem

Individual comment thread item rendered within the list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2ListItem />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-list-item-v2></velt-comments-sidebar-list-item-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2EmptyPlaceholder

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2EmptyPlaceholder>
      <VeltCommentsSidebarV2ResetFilterButton />
    </VeltCommentsSidebarV2EmptyPlaceholder>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-empty-placeholder-v2>
      <velt-comments-sidebar-reset-filter-button-v2></velt-comments-sidebar-reset-filter-button-v2>
    </velt-comments-sidebar-empty-placeholder-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2ResetFilterButton

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2ResetFilterButton />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-reset-filter-button-v2></velt-comments-sidebar-reset-filter-button-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2PageModeComposer

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2PageModeComposer />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-page-mode-composer-v2></velt-comments-sidebar-page-mode-composer-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FocusedThread

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FocusedThread>
      <VeltCommentsSidebarV2FocusedThreadBackButton />
      <VeltCommentsSidebarV2FocusedThreadDialogContainer />
    </VeltCommentsSidebarV2FocusedThread>
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-focused-thread-v2>
      <velt-comments-sidebar-focused-thread-back-button-v2></velt-comments-sidebar-focused-thread-back-button-v2>
      <velt-comments-sidebar-focused-thread-dialog-container-v2></velt-comments-sidebar-focused-thread-dialog-container-v2>
    </velt-comments-sidebar-focused-thread-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FocusedThreadBackButton

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FocusedThreadBackButton />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-focused-thread-back-button-v2></velt-comments-sidebar-focused-thread-back-button-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

### VeltCommentsSidebarV2FocusedThreadDialogContainer

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebarV2FocusedThreadDialogContainer />
    ```

    **Props:** No additional props.
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments-sidebar-focused-thread-dialog-container-v2></velt-comments-sidebar-focused-thread-dialog-container-v2>
    ```

    **Attributes:** No additional attributes.
  </Tab>
</Tabs>

***

## Component Map

All 27 primitives and their corresponding HTML elements:

| React Component                                                     | HTML Element                                                                  |
| ------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| `VeltCommentsSidebarV2`                                             | `velt-comments-sidebar-v2`                                                    |
| `VeltCommentsSidebarV2Skeleton`                                     | `velt-comments-sidebar-skeleton-v2`                                           |
| `VeltCommentsSidebarV2Panel`                                        | `velt-comments-sidebar-panel-v2`                                              |
| `VeltCommentsSidebarV2Header`                                       | `velt-comments-sidebar-header-v2`                                             |
| `VeltCommentsSidebarV2CloseButton`                                  | `velt-comments-sidebar-close-button-v2`                                       |
| `VeltCommentsSidebarV2MinimalActionsDropdown`                       | `velt-comments-sidebar-minimal-actions-dropdown-v2`                           |
| `VeltCommentsSidebarV2MinimalActionsDropdownTrigger`                | `velt-comments-sidebar-minimal-actions-dropdown-trigger-v2`                   |
| `VeltCommentsSidebarV2MinimalActionsDropdownContent`                | `velt-comments-sidebar-minimal-actions-dropdown-content-v2`                   |
| `VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllRead`     | `velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2`     |
| `VeltCommentsSidebarV2MinimalActionsDropdownContentMarkAllResolved` | `velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2` |
| `VeltCommentsSidebarV2FilterDropdown`                               | `velt-comments-sidebar-filter-dropdown-v2`                                    |
| `VeltCommentsSidebarV2FilterDropdownTrigger`                        | `velt-comments-sidebar-filter-dropdown-trigger-v2`                            |
| `VeltCommentsSidebarV2FilterDropdownContent`                        | `velt-comments-sidebar-filter-dropdown-content-v2`                            |
| `VeltCommentsSidebarV2FilterDropdownContentList`                    | `velt-comments-sidebar-filter-dropdown-content-list-v2`                       |
| `VeltCommentsSidebarV2FilterDropdownContentListItem`                | `velt-comments-sidebar-filter-dropdown-content-list-item-v2`                  |
| `VeltCommentsSidebarV2FilterDropdownContentListItemIndicator`       | `velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2`        |
| `VeltCommentsSidebarV2FilterDropdownContentListItemLabel`           | `velt-comments-sidebar-filter-dropdown-content-list-item-label-v2`            |
| `VeltCommentsSidebarV2FilterDropdownContentListCategory`            | `velt-comments-sidebar-filter-dropdown-content-list-category-v2`              |
| `VeltCommentsSidebarV2FilterDropdownContentListCategoryContent`     | `velt-comments-sidebar-filter-dropdown-content-list-category-content-v2`      |
| `VeltCommentsSidebarV2List`                                         | `velt-comments-sidebar-list-v2`                                               |
| `VeltCommentsSidebarV2ListItem`                                     | `velt-comments-sidebar-list-item-v2`                                          |
| `VeltCommentsSidebarV2EmptyPlaceholder`                             | `velt-comments-sidebar-empty-placeholder-v2`                                  |
| `VeltCommentsSidebarV2ResetFilterButton`                            | `velt-comments-sidebar-reset-filter-button-v2`                                |
| `VeltCommentsSidebarV2PageModeComposer`                             | `velt-comments-sidebar-page-mode-composer-v2`                                 |
| `VeltCommentsSidebarV2FocusedThread`                                | `velt-comments-sidebar-focused-thread-v2`                                     |
| `VeltCommentsSidebarV2FocusedThreadBackButton`                      | `velt-comments-sidebar-focused-thread-back-button-v2`                         |
| `VeltCommentsSidebarV2FocusedThreadDialogContainer`                 | `velt-comments-sidebar-focused-thread-dialog-container-v2`                    |