import { VeltProvider, VeltCursor } from '@veltdev/react';

export default function App() {

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

Import the VeltCursor Component

Import the VeltCursor component.

import { VeltProvider, VeltCursor } from '@veltdev/react'
2

Add the VeltCursor Component

Add the VeltCursor component to the root of your app.

<VeltProvider apiKey="API_KEY">
      <VeltCursor />
      {/* ... */}
</VeltProvider>

This component renders the cursors of users on the same document and location in your web app.

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.

import { VeltProvider, VeltCursor } from '@veltdev/react';

export default function App() {

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