> ## 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 Presence Component
>
> Import the `Presence` component from the React library.
>
> ```js theme={null}
> import { VeltPresence } from '@veltdev/react';
> ```
>
> ## 2. Add Presence Component
>
> Add it anywhere you want to see the `User` avatars.
>
> ```js theme={null}
> <VeltPresence />
> ```
>
> This component renders the avatars of `Users` on the same document in your web app. We automactically detect when `Users` are active on the document and render their avatars.
>
> ## 3. Test Integration
>
> Test it out by opening the target page in two browsers with two different `Users` logged in.
>
> You should see the avatars of the `Users` rendered where you added the `Presence` component.

> [tab] Other Frameworks
>
> ## 1. Place the \<velt-presence> component
>
> Place the component wherever you want the avatars to appear.
>
> ```html theme={null}
> <velt-presence></velt-presence>
> ```
>
> ## 2. Test Integration
>
> Test it out by opening the target page in two browsers with two different `Users` logged in.
>
> You should see the avatars of the `Users` rendered where you added the `Presence` component.

```js React theme={null}
import { VeltPresence } from '@veltdev/react';

export default function App() {

  return (
    <div className="toolbar">
      <VeltPresence />
    </div>
  );
}
```

```html HTML theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Presence documentation</title>
  </head>
  <body>
    <div class="toolbar">
      <velt-presence></velt-presence>
    </div>
  </body>
</html>
```


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