> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Comment Sidebar v2 Wireframes
> Comment Sidebar V2 Component — primitive-based wireframe with 27+ standalone primitives.
> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.
## Overview
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
## Skeleton
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Panel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
### Header (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Search (Panel Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Icon (Panel Header Search)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Header Search)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### FilterButton (Panel Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### FilterContainer (Panel Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **GroupBy (Panel Header FilterContainer)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **SectionList (Panel Header FilterContainer)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**SectionLabel (Panel Header FilterContainer Section)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionField (Panel Header FilterContainer Section)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**SectionControl (Panel Header FilterContainer SectionField)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
**SectionControlChevron (Panel Header FilterContainer SectionControl)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionControlValue (Panel Header FilterContainer SectionControl)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionControlChipList (Panel Header FilterContainer SectionControl)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
**SectionControlChip (Panel Header FilterContainer SectionControlChipList)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionControlSearch (Panel Header FilterContainer SectionControl)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionOptionList (Panel Header FilterContainer SectionField)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
**SectionOption (Panel Header FilterContainer SectionOptionList)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
**SectionOptionCheckbox (Panel Header FilterContainer SectionOption)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionOptionName (Panel Header FilterContainer SectionOption)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**SectionOptionCount (Panel Header FilterContainer SectionOption)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ResetButton (Panel Header FilterContainer)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ApplyButton (Panel Header FilterContainer)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **CloseButton (Panel Header FilterContainer)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### FullscreenButton (Panel Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### FilterDropdown (Panel Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header FilterDropdown)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
**List (Panel Header FilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Label (Panel Header FilterDropdown Content List Category)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Item (Panel Header FilterDropdown Content List)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
**Indicator (Panel Header FilterDropdown Content List Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Label (Panel Header FilterDropdown Content List Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Count (Panel Header FilterDropdown Content List Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Category (Panel Header FilterDropdown Content List)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Content (Panel Header FilterDropdown Content List Category)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### List (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Label (Panel List ListGroupHeader)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel List ListGroupHeader)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Chevron (Panel List ListGroupHeader)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Separator (Panel List ListGroupHeader)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### EmptyPlaceholder (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
#### ResetFilterButton (Panel EmptyPlaceholder)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### PageModeComposer (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### FocusedThread (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### BackButton (Panel FocusedThread)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### DialogContainer (Panel FocusedThread)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.