> ## 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 the VeltCursor Component**
>
> Import the `VeltCursor` component.
>
> ```js theme={null}
> import { VeltProvider, VeltCursor } from '@veltdev/react'
> ```
>
> **2. Add the VeltCursor Component**
>
> Add the `VeltCursor` component to the root of your app.
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>       <VeltCursor />
>       {/* ... */}
> </VeltProvider>
> ```
>
> This component renders the cursors of users on the same document and location in your web app.
>
> > [!NOTE]
> >
> > Note that we automatically assign different colors to users & adapt the cursors to different screen sizes and to what's actually present on the screen. So you don't have to worry about building this logic.
>
> **3. Test Integration**
>
> Test it out by opening the target page in two browsers (with one in incognito) with two different users logged in.
>
> You should see the cursors of the users rendered as you move mouse around.

> [tab] Other Frameworks
>
> **1. Place the \<velt-cursor> component**
>
> Add the `<velt-cursor>` component to the root of your app.
>
> ```html theme={null}
> <body>
>   <velt-cursor></velt-cursor>
> </body>
> ```
>
> This component renders the cursors of users on the same document and location in your web app.
>
> > [!NOTE]
> >
> > Note that we automatically assign different colors to users & adapt the cursors to different screen sizes and to what's actually present on the screen. So you don't have to worry about building this logic.
>
> **2. Test Integration**
>
> Test it out by opening the target page in two browsers (with one in incognito) with two different users logged in.
>
> You should see the cursors of the users rendered as you move mouse around.

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltCursor />
      {/* ... */}
    </VeltProvider>
  );
}
```

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

```


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