> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Comment Sidebar v2 Wireframes
> Primitive-based Comment Sidebar V2 wireframe with 27+ standalone primitives — override the header, filters, threads list, and search with your own HTML.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## Overview
```jsx theme={null}
```
```html theme={null}
```
## Skeleton
```jsx theme={null}
```
```html theme={null}
```
## Panel
```jsx theme={null}
```
```html theme={null}
```
### Header (Panel)
```jsx theme={null}
```
```html theme={null}
```
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)
```jsx theme={null}
```
```html theme={null}
```
#### Search (Panel Header)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Panel Header Search)**
```jsx theme={null}
```
```html theme={null}
```
##### **Input (Panel Header Search)**
```jsx theme={null}
```
```html theme={null}
```
#### FilterButton (Panel Header)
```jsx theme={null}
```
```html theme={null}
```
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)**
```jsx theme={null}
```
```html theme={null}
```
#### FilterContainer (Panel Header)
```jsx theme={null}
```
```html theme={null}
```
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)**
```jsx theme={null}
```
```html theme={null}
```
##### **GroupBy (Panel Header FilterContainer)**
```jsx theme={null}
```
```html theme={null}
```
##### **SectionList (Panel Header FilterContainer)**
```jsx theme={null}
```
```html theme={null}
```
`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)**
```jsx theme={null}
```
```html theme={null}
```
**SectionLabel (Panel Header FilterContainer Section)**
```jsx theme={null}
```
```html theme={null}
```
**SectionField (Panel Header FilterContainer Section)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControl (Panel Header FilterContainer SectionField)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControlChevron (Panel Header FilterContainer SectionControl)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControlValue (Panel Header FilterContainer SectionControl)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControlChipList (Panel Header FilterContainer SectionControl)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControlChip (Panel Header FilterContainer SectionControlChipList)**
```jsx theme={null}
```
```html theme={null}
```
**SectionControlSearch (Panel Header FilterContainer SectionControl)**
```jsx theme={null}
```
```html theme={null}
```
**SectionOptionList (Panel Header FilterContainer SectionField)**
```jsx theme={null}
```
```html theme={null}
```
**SectionOption (Panel Header FilterContainer SectionOptionList)**
```jsx theme={null}
```
```html theme={null}
```
**SectionOptionCheckbox (Panel Header FilterContainer SectionOption)**
```jsx theme={null}
```
```html theme={null}
```
**SectionOptionName (Panel Header FilterContainer SectionOption)**
```jsx theme={null}
```
```html theme={null}
```
**SectionOptionCount (Panel Header FilterContainer SectionOption)**
```jsx theme={null}
```
```html theme={null}
```
##### **ResetButton (Panel Header FilterContainer)**
```jsx theme={null}
```
```html theme={null}
```
##### **ApplyButton (Panel Header FilterContainer)**
```jsx theme={null}
```
```html theme={null}
```
##### **CloseButton (Panel Header FilterContainer)**
```jsx theme={null}
```
```html theme={null}
```
#### FullscreenButton (Panel Header)
```jsx theme={null}
```
```html theme={null}
```
#### FilterDropdown (Panel Header)
```jsx theme={null}
```
```html theme={null}
```
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)**
```jsx theme={null}
```
```html theme={null}
```
##### **Content (Panel Header FilterDropdown)**
```jsx theme={null}
```
```html theme={null}
```
**List (Panel Header FilterDropdown Content)**
```jsx theme={null}
```
```html theme={null}
```
**Label (Panel Header FilterDropdown Content List Category)**
```jsx theme={null}
```
```html theme={null}
```
**Item (Panel Header FilterDropdown Content List)**
```jsx theme={null}
```
```html theme={null}
```
**Indicator (Panel Header FilterDropdown Content List Item)**
```jsx theme={null}
```
```html theme={null}
```
**Label (Panel Header FilterDropdown Content List Item)**
```jsx theme={null}
```
```html theme={null}
```
**Count (Panel Header FilterDropdown Content List Item)**
```jsx theme={null}
```
```html theme={null}
```
**Category (Panel Header FilterDropdown Content List)**
```jsx theme={null}
```
```html theme={null}
```
**Content (Panel Header FilterDropdown Content List Category)**
```jsx theme={null}
```
```html theme={null}
```
### List (Panel)
```jsx theme={null}
```
```html theme={null}
```
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)
```jsx theme={null}
```
```html theme={null}
```
##### **Label (Panel List ListGroupHeader)**
```jsx theme={null}
```
```html theme={null}
```
##### **Count (Panel List ListGroupHeader)**
```jsx theme={null}
```
```html theme={null}
```
##### **Chevron (Panel List ListGroupHeader)**
```jsx theme={null}
```
```html theme={null}
```
##### **Separator (Panel List ListGroupHeader)**
```jsx theme={null}
```
```html theme={null}
```
### EmptyPlaceholder (Panel)
```jsx theme={null}
```
```html theme={null}
```
#### ResetFilterButton (Panel EmptyPlaceholder)
```jsx theme={null}
```
```html theme={null}
```
### PageModeComposer (Panel)
```jsx theme={null}
```
```html theme={null}
```
### FocusedThread (Panel)
```jsx theme={null}
```
```html theme={null}
```
#### BackButton (Panel FocusedThread)
```jsx theme={null}
```
```html theme={null}
```
#### DialogContainer (Panel FocusedThread)
```jsx theme={null}
```
```html theme={null}
```