> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Presence

> The Presence component displays the avatars of users in a room.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltPresenceWireframe

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/DbH0zqBno4aLH0SS/images/customization/presence/presence-overview.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=cca055c4f9b3765daaf4fe12d9d14e6b" alt="presence-overview.png" width="1280" height="420" data-path="images/customization/presence/presence-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceWireframe>
            <VeltPresenceWireframe.AvatarList />
            <VeltPresenceWireframe.AvatarRemainingCount />
        </VeltPresenceWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-wireframe>
            <velt-presence-avatar-list-wireframe></velt-presence-avatar-list-wireframe>
            <velt-presence-avatar-remaining-count-wireframe></velt-presence-avatar-remaining-count-wireframe>
        </velt-presence-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### AvatarList

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/DbH0zqBno4aLH0SS/images/customization/presence/presence-avatar-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=8ebfb674ed79704abc8ef27dfd840830" alt="presence-avatar-list.png" width="1280" height="420" data-path="images/customization/presence/presence-avatar-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceWireframe.AvatarList>
            <VeltPresenceWireframe.AvatarList.Item />
        </VeltPresenceWireframe.AvatarList>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-avatar-list-wireframe>
            <velt-presence-avatar-list-item-wireframe></velt-presence-avatar-list-item-wireframe>
        </velt-presence-avatar-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/DbH0zqBno4aLH0SS/images/customization/presence/presence-avatar-list-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=1a56899207301c4f4a95240201f80c86" alt="presence-avatar-list-item.png" width="1280" height="420" data-path="images/customization/presence/presence-avatar-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceWireframe.AvatarList.Item />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-avatar-list-item-wireframe></velt-presence-avatar-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### AvatarRemainingCount

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/DbH0zqBno4aLH0SS/images/customization/presence/presence-avatar-remaining-count.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=c5dea42749d0f732db2ebc4d2db6ea78" alt="presence-avatar-remaining-count.png" width="1280" height="420" data-path="images/customization/presence/presence-avatar-remaining-count.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceWireframe.AvatarRemainingCount />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-avatar-remaining-count-wireframe></velt-presence-avatar-remaining-count-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## VeltPresenceTooltipWireframe

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/jN4MMHm5qDnrvSAH/images/customization/presence/presence-tooltip.png?fit=max&auto=format&n=jN4MMHm5qDnrvSAH&q=85&s=8cb10e60604838d90d17bcf58fd5943b" alt="presence-tooltip.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe>
            <VeltPresenceTooltipWireframe.Avatar />
            <VeltPresenceTooltipWireframe.StatusContainer />
        </VeltPresenceTooltipWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-wireframe>
            <velt-presence-tooltip-avatar-wireframe></velt-presence-tooltip-avatar-wireframe>
            <velt-presence-tooltip-status-container-wireframe></velt-presence-tooltip-status-container-wireframe>
        </velt-presence-tooltip-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Avatar

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/jN4MMHm5qDnrvSAH/images/customization/presence/presence-tooltip-avatar.png?fit=max&auto=format&n=jN4MMHm5qDnrvSAH&q=85&s=5acae3ae4d4431afeb5c4d925f187e9e" alt="presence-tooltip-avatar.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip-avatar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-avatar-wireframe></velt-presence-tooltip-avatar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### StatusContainer

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/DbH0zqBno4aLH0SS/images/customization/presence/presence-tooltip-avatar-status.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=5d8a778f668037f7f2912d564de74fdf" alt="presence-tooltip-avatar-status.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip-avatar-status.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe.StatusContainer>
            <VeltPresenceTooltipWireframe.UserName />
            <VeltPresenceTooltipWireframe.UserActive />
            <VeltPresenceTooltipWireframe.UserInactive />
        </VeltPresenceTooltipWireframe.StatusContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-status-container-wireframe>
            <velt-presence-tooltip-user-name-wireframe></velt-presence-tooltip-user-name-wireframe>
            <velt-presence-tooltip-user-active-wireframe></velt-presence-tooltip-user-active-wireframe>
            <velt-presence-tooltip-user-inactive-wireframe></velt-presence-tooltip-user-inactive-wireframe>
        </velt-presence-tooltip-status-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### UserName

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/jN4MMHm5qDnrvSAH/images/customization/presence/presence-tooltip-username.png?fit=max&auto=format&n=jN4MMHm5qDnrvSAH&q=85&s=3816ae5896beca897456c3c2a76d5b1d" alt="presence-tooltip-username.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip-username.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe.UserName />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-user-name-wireframe></velt-presence-tooltip-user-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### UserActive

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/jN4MMHm5qDnrvSAH/images/customization/presence/presence-tooltip-user-active.png?fit=max&auto=format&n=jN4MMHm5qDnrvSAH&q=85&s=20da4ecdaf9c9dc84d8f1663c8004ca2" alt="presence-tooltip-user-active.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip-user-active.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe.UserActive />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-user-active-wireframe></velt-presence-tooltip-user-active-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### UserInactive

<img src="https://mintcdn.com/velt-v6-0-0-beta-2/jN4MMHm5qDnrvSAH/images/customization/presence/presence-tooltip-user-inactive.png?fit=max&auto=format&n=jN4MMHm5qDnrvSAH&q=85&s=e87d4e4b0dbd0248cd96941292cb0f7e" alt="presence-tooltip-user-inactive.png" width="1280" height="420" data-path="images/customization/presence/presence-tooltip-user-inactive.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPresenceTooltipWireframe.UserInactive />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-presence-tooltip-user-inactive-wireframe></velt-presence-tooltip-user-inactive-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Styling

### Disable ShadowDOM

* By default, ShadowDOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
* Disable the shadow dom to apply your custom CSS to the component.

Default: `true`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltPresence shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-presence shadow-dom="false"></velt-presence>
    ```
  </Tab>
</Tabs>
