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

# Inline Comments Section Primitives

> Primitive components for building custom Inline Comments Section UIs — compose inline thread lists, composers, and reactions from low-level Velt blocks.

<Tip>
  Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).
</Tip>

<Note>
  Inline Comments Section primitives can be used standalone: primitives that share the same `targetElementId` (React) or `target-element-id` (HTML) map to the same context, so standalone primitives co-locate with the root component's data.
</Note>

### VeltInlineCommentsSectionCommentCount

Comment count display for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-comment-count annotation-id="abc123"></velt-inline-comments-section-comment-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionComposerContainer

Composer container for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-composer-container annotation-id="abc123"></velt-inline-comments-section-composer-container>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionList

List container for inline comments.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-list annotation-id="abc123"></velt-inline-comments-section-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionPanel

Panel container for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-panel annotation-id="abc123"></velt-inline-comments-section-panel>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSkeleton

Loading skeleton for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-skeleton annotation-id="abc123"></velt-inline-comments-section-skeleton>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdown

Complete filter dropdown for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown annotation-id="abc123"></velt-inline-comments-section-filter-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownTrigger

Trigger button for the inline comments section filter dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownTriggerArrow

Arrow indicator for the inline comments section filter dropdown trigger.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-trigger-arrow annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger-arrow>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownTriggerName

Name display for the inline comments section filter dropdown trigger.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-trigger-name annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContent

Content container for the inline comments section filter dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContentList

List container within the inline comments section filter dropdown content.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content-list annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContentListItem

Individual list item within the inline comments section filter dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content-list-item annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

Checkbox within a filter dropdown list item.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content-list-item-checkbox annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item-checkbox>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContentListItemLabel

Label within a filter dropdown list item.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content-list-item-label annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionFilterDropdownContentApplyButton

Apply button within the inline comments section filter dropdown content.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltInlineCommentsSectionFilterDropdownContentApplyButton
      targetElementId="my-section"
      defaultCondition={true}
    />
    ```

    **Props:**

    | Prop               | Type      | Default | Description                                                                          |
    | ------------------ | --------- | ------- | ------------------------------------------------------------------------------------ |
    | `targetElementId`  | `string`  | —       | ID of the target element whose inline comments section context the button applies to |
    | `defaultCondition` | `boolean` | —       | When `false`, the component always renders regardless of internal state              |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-filter-dropdown-content-apply-button
      target-element-id="my-section"
      default-condition="true">
    </velt-inline-comments-section-filter-dropdown-content-apply-button>
    ```

    **Attributes:**

    | Attribute           | Type     | Default | Description                                                                          |
    | ------------------- | -------- | ------- | ------------------------------------------------------------------------------------ |
    | `target-element-id` | `string` | —       | ID of the target element whose inline comments section context the button applies to |
    | `default-condition` | `string` | —       | When `"false"`, the component always renders regardless of internal state            |
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdown

Complete sorting dropdown for the inline comments section.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownTrigger

Trigger button for the inline comments section sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownTriggerIcon

Icon for the inline comments section sorting dropdown trigger.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-trigger-icon annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownTriggerName

Name display for the inline comments section sorting dropdown trigger.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-trigger-name annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownContent

Content container for the inline comments section sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownContentItem

Individual sort option item within the sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content-item annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownContentItemIcon

Icon for a sort option item in the sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content-item-icon annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownContentItemName

Name label for a sort option item in the sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content-item-name annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltInlineCommentsSectionSortingDropdownContentItemTick

Tick/checkmark for the active sort option item in the sorting dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-inline-comments-section-sorting-dropdown-content-item-tick annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-tick>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>