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

# Setup

<Tabs>
  <Tab title="React / Next.js">
    <Steps titleSize="h2">
      <Step title="Import Comments Sidebar Components">
        Import the Comments Sidebar Components.

        ```jsx theme={null}
        import { 
          VeltProvider, 
          VeltCommentsSidebar, 
          VeltSidebarButton,
          VeltCommentTool 
        } from '@veltdev/react';
        ```
      </Step>

      <Step title="Add Comments and Sidebar components">
        Add the `VeltComments` and `VeltCommentsSidebar` components to the root of your app.

        ```jsx theme={null}
        <div>
          <VeltComments />
          <VeltCommentsSidebar />
        </div>
        ```
      </Step>

      <Step title="Add Sidebar button and Comment Tool component">
        Add the Sidebar button to toggle the sidebar. Add the `VeltCommentTool` component to leave comments.

        ```jsx theme={null}
        <div className="toolbar">
          <VeltSidebarButton />
          <VeltCommentTool />
        </div>
        ```

        This is completely optional and you can toggle the sidebar in the comment dialog as well.
      </Step>

      <Step title="Test Integration">
        Test it out by opening the sidebar.

        You should be able to click the `All comments` link in a comment dialog box on the bottom.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Place the <velt-comments-sidebar> component">
        Place the `<velt-comments-sidebar>` component at the root of your app.

        ```html theme={null}
        <velt-comments-sidebar></velt-comments-sidebar>
        ```
      </Step>

      <Step title="Place the <velt-sidebar-button> component">
        Place the `<velt-sidebar-button>` component wherever you want the toggle button to appear.

        ```html theme={null}
        <velt-sidebar-button></velt-sidebar-button>
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## V2 Setup

The V2 sidebar is a fully primitive-based implementation. Use it by either importing `VeltCommentsSidebarV2` directly or passing `version="2"` on the existing `VeltCommentsSidebar`.

<Tabs>
  <Tab title="React / Next.js">
    **Option A — Direct import:**

    ```jsx theme={null}
    import {
      VeltProvider,
      VeltCommentsSidebarV2,
      VeltSidebarButton,
      VeltCommentTool
    } from '@veltdev/react';

    export default function App() {
      return (
        <VeltProvider apiKey="API_KEY">
          <VeltComments />
          <VeltCommentsSidebarV2 />
          <div className="toolbar">
            <VeltCommentTool />
            <VeltSidebarButton />
          </div>
        </VeltProvider>
      );
    }
    ```

    **Option B — Version prop on existing component:**

    ```jsx theme={null}
    <VeltCommentsSidebar version="2" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    **Option A — Direct element:**

    ```html theme={null}
    <velt-comments-sidebar-v2></velt-comments-sidebar-v2>
    ```

    **Option B — Version attribute on existing element:**

    ```html theme={null}
    <velt-comments-sidebar version="2"></velt-comments-sidebar>
    ```
  </Tab>
</Tabs>

For V2 props reference, see [`VeltCommentsSidebarV2Props`](/api-reference/sdk/models/data-models#veltcommentssidebarv2props).

For V2 wireframe customization, see [Comment Sidebar V2 UI Customization](/ui-customization/features/async/comments/comment-sidebar-structure-v2).

<RequestExample>
  ```jsx React / Next.js theme={null}
  import { 
    VeltProvider, 
    VeltCommentsSidebar, 
    VeltSidebarButton,
    VeltCommentTool 
  } from '@veltdev/react';

  export default function App() {

    return (
      <VeltProvider apiKey="API_KEY">
        <VeltComments /> {/* Add VeltComments to the root of your app provider */}
        <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

        <div className="toolbar">
          <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
          <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
        </div>

      </VeltProvider>
    );
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Collaboration App</title>
      <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
      <script>
        async function loadVelt() {
          await Velt.init("YOUR_VELT_API_KEY");
        }
      </script>
    </head>
    <body>
      <velt-comments></velt-comments> <!-- add to the root of your app-->
      <velt-comments-sidebar></velt-comments-sidebar> <!-- add to the root of your app -->
      <div class="toolbar"> <!-- a component representing a toolbar-->
        <velt-comment-tool></velt-comment-tool> <!-- add wherever you want it to appear-->
        <velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
      </div>
      

    </body>
  </html>
  ```
</RequestExample>