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

> Attach a comment to a specific piece of text by wrapping it in the standalone Comment Text component.

The Comment Text component attaches an existing comment to a specific piece of text in your own markup. Put any text inside it and give it an annotation id: it highlights that text and attaches the comment to it.

Use it when the text you want to comment on lives in your own components and you already know which annotation belongs to it, for example when rendering comments in a rich-text editor. For selection-driven commenting where the user picks the text, use [text comments](/docs/async-collaboration/comments/setup/text) instead.

## Setup

Wrap the text and pass either `annotationId` or `multiThreadAnnotationId`.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltCommentText } from '@veltdev/react';

    <VeltCommentText annotationId="ANNOTATION_ID">
      {/* your content here */}
    </VeltCommentText>

    <VeltCommentText multiThreadAnnotationId="MULTI_THREAD_ANNOTATION_ID">
      {/* your content here */}
    </VeltCommentText>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-text annotation-id="ANNOTATION_ID">
      <!-- your content here -->
    </velt-comment-text>

    <velt-comment-text multi-thread-annotation-id="MULTI_THREAD_ANNOTATION_ID">
      <!-- your content here -->
    </velt-comment-text>
    ```
  </Tab>
</Tabs>

## Props

| Prop                      | HTML attribute               | Type     | Required | Description                                                |
| ------------------------- | ---------------------------- | -------- | -------- | ---------------------------------------------------------- |
| `annotationId`            | `annotation-id`              | `string` | No       | The comment annotation to attach to the wrapped text.      |
| `multiThreadAnnotationId` | `multi-thread-annotation-id` | `string` | No       | The multi-thread annotation to attach to the wrapped text. |

<Note>
  This component renders the `velt-comment-text` element. It is distinct from `VeltTextComment`, which is the selection toolbar used by [text comments](/docs/async-collaboration/comments/setup/text).
</Note>