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

# Freestyle Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/Add-Freestyle-Comment.gif?s=ff59589d7645c5e1a251a482964fc129)

> [tab] React / Next.js
>
> ## 1. Import Comment components
>
> Import the `VeltComments` component and the `VeltCommentTool` component.
>
> ```js theme={null}
> import {
>   VeltProvider,
>   VeltComments,
>   VeltCommentTool
> } from '@veltdev/react';
> ```
>
> ## 2. Add Comments component
>
> Add the `VeltComments` component to the root of your app.
>
> This component is required to render comments in your app.
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>   <VeltComments />
> </VeltProvider>
> ```
>
> ## 3. Add Comment Tool component
>
> Add the `VeltCommentTool` component wherever you want to show the comment tool button.
>
> ![](https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/comment-tool.png?fit=max\&auto=format\&n=2O8vk8YlVD4Kq-ni\&q=85\&s=f6542acc54050b4b607812391c0b97ad)
>
> Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. Now you can click anywhere on the document to attach comments to any elements.
>
> ```js theme={null}
> <div className="toolbar">
>   <VeltCommentTool />
> </div>
> ```
>
> ## 4. Test Integration
>
> Test it out by opening the page with Velt components in your browser.
>
> Click on the `Comment Tool` and click anywhere on the page to add a comment.
>
> ![](https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/standard-comment.png?fit=max\&auto=format\&n=gY7ilEx2g4g3-HVe\&q=85\&s=6f894dc613dc924c3fa070780a479496)

> [tab] Other Frameworks
>
> ## 1. Add Comment component
>
> 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.
>
> ```html theme={null}
> <body>
>   <velt-comments></velt-comments>
> </body>
> ```
>
> ## 2. Add Comment Tool component
>
> Add the `<velt-comment-tool>` component wherever you want to show the comment tool button.
>
> ![](https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/comment-tool.png?fit=max\&auto=format\&n=2O8vk8YlVD4Kq-ni\&q=85\&s=f6542acc54050b4b607812391c0b97ad)
>
> Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. Now you can click anywhere on the document to attach comments to any elements.
>
> ```js theme={null}
> <div class="toolbar">
>   <velt-comment-tool></velt-comment-tool>
> </div>
> ```
>
> ## 3. Test Integration
>
> Test it out by adding a comment.
>
> You should be able to leave comments using the `Comment Tool`.
>
> ![](https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/standard-comment.png?fit=max\&auto=format\&n=gY7ilEx2g4g3-HVe\&q=85\&s=6f894dc613dc924c3fa070780a479496)

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments />

      <div className="toolbar">
        <VeltCommentTool />
      </div>
    </VeltProvider>
  );
}
```

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

    <div class="toolbar">
      <velt-comment-tool></velt-comment-tool>
    </div>
  </body>
</html>
```


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