> ## 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 Pin Primitives

> Primitive components for building custom Comment Pin UIs — compose pin markers, avatars, and unread badges from low-level Velt building blocks.

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

<Note>
  Comment Pin primitives can be used standalone: pass `annotationId` (React) or `annotation-id` (HTML) to load annotation data directly without a parent root component.
</Note>

### VeltCommentPinNumber

Number badge displayed on the comment pin.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-number annotation-id="abc123"></velt-comment-pin-number>
    ```

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

***

### VeltCommentPinIndex

Index label displayed on the comment pin.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-index annotation-id="abc123"></velt-comment-pin-index>
    ```

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

***

### VeltCommentPinTriangle

Triangle pointer element on the comment pin.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-triangle annotation-id="abc123"></velt-comment-pin-triangle>
    ```

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

***

### VeltCommentPinPrivateCommentIndicator

Indicator shown on the pin when the comment is private.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-private-comment-indicator annotation-id="abc123"></velt-comment-pin-private-comment-indicator>
    ```

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

***

### VeltCommentPinGhostCommentIndicator

Indicator shown on the pin when the comment is a ghost comment.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-ghost-comment-indicator annotation-id="abc123"></velt-comment-pin-ghost-comment-indicator>
    ```

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

***

### VeltCommentPinUnreadCommentIndicator

Indicator shown on the pin when the comment has unread replies.

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

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-pin-unread-comment-indicator annotation-id="abc123"></velt-comment-pin-unread-comment-indicator>
    ```

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