> ## 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 > [tab] React / Next.js > > ## 1. Import Comments Sidebar Components > > Import the Comments Sidebar Components. > > ```jsx theme={null} > import { > VeltProvider, > VeltCommentsSidebar, > VeltSidebarButton, > VeltCommentTool > } from '@veltdev/react'; > ``` > > ## 2. Add Comments and Sidebar components > > Add the `VeltComments` and `VeltCommentsSidebar` components to the root of your app. > > ```jsx theme={null} >
> > >
> ``` > > ## 3. 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} >
> > >
> ``` > > This is completely optional and you can toggle the sidebar in the comment dialog as well. > > ## 4. 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. > [tab] Other Frameworks > > ## 1. Place the \ component > > Place the `` component at the root of your app. > > ```html theme={null} > > ``` > > ## 2. Place the \ component > > Place the `` component wherever you want the toggle button to appear. > > ```html theme={null} > > ``` ```jsx React / Next.js theme={null} import { VeltProvider, VeltCommentsSidebar, VeltSidebarButton, VeltCommentTool } from '@veltdev/react'; export default function App() { return ( {/* Add VeltComments to the root of your app provider */} {/* Add VeltCommentsSidebar to the root of your app provider */}
{/* Add VeltCommentTool wherever you want it to appear */} {/* Add VeltCommentSideBarButton wherever you want it to appear */}
); } ``` ```html HTML theme={null} Collaboration App
``` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.