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

# Text Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/Add-Text-Comments.gif?s=1da499b73486c2acd4667b517baab389)

> [tab] React / Next.js
>
> ## 1. Import Comment components
>
> Import the `VeltComments` component.
>
> ```js theme={null}
> import { VeltProvider, VeltComments } from '@veltdev/react';
> ```
>
> ## 2. Add Comment component with Text mode
>
> Add the `VeltComments` component to the root of your app.
>
> This component is required to render comments in your app.
>
> Text mode is enabled by default. To disable it, set the `textMode` attribute to `false`.
>
> Text mode allows users to select any text and attach comments to it similar to Google Docs.
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>   <VeltComments textMode={true} />
> </VeltProvider>
> ```
>
> ## 3. Test Integration
>
> Test it out by opening the page with Velt components in your browser.
>
> Select any text, a `Comment Tool` button will appear near the highlighted text. Click on it to add a comment.
>
> ![](https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/text-comment.png?fit=max\&auto=format\&n=gY7ilEx2g4g3-HVe\&q=85\&s=e2938519d890a5c020d1da5407c4557c)

> [tab] Other Frameworks
>
> ## 1. Add Comment component with Text mode
>
> Add the comment component to your template. Try to put it as close to the root level of your `<body>`.
>
> This component is required to render comments in your app. Text mode allows users to attach comments to highlighted text.
>
> ```html theme={null}
> <body>
>   <velt-comments text-mode="true"></velt-comments>
> </body>
> ```
>
> ## 2. Test Integration
>
> Test it out by opening the page with Velt components in your browser.
>
> Select any text, a `Comment Tool` button will appear near the highlighted text. Click on it to add a comment.
>
> ![](https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/text-comment.png?fit=max\&auto=format\&n=gY7ilEx2g4g3-HVe\&q=85\&s=e2938519d890a5c020d1da5407c4557c)

```jsx React / Next.js theme={null}
import { VeltProvider, VeltComments } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments textMode={true} />

    </VeltProvider>
  );
}
```

```html HTML theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <velt-comments text-mode="true"></velt-comments>
  </body>
</html>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.