> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.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-6/SW0Ca8JNV5oRKGeB/images/customization/presence/presence-overview.png?fit=max&auto=format&n=SW0Ca8JNV5oRKGeB&q=85&s=cc5099817f69a126b6d95894ec1b79d6" 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-6/SW0Ca8JNV5oRKGeB/images/customization/presence/presence-avatar-list.png?fit=max&auto=format&n=SW0Ca8JNV5oRKGeB&q=85&s=0ffd73a29b02daeb4d9baeaa613c2010" 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-6/SW0Ca8JNV5oRKGeB/images/customization/presence/presence-avatar-list-item.png?fit=max&auto=format&n=SW0Ca8JNV5oRKGeB&q=85&s=fdaf84f8719f6f6cd00c28114ca64206" 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-6/SW0Ca8JNV5oRKGeB/images/customization/presence/presence-avatar-remaining-count.png?fit=max&auto=format&n=SW0Ca8JNV5oRKGeB&q=85&s=c7c73d8a6069219f41dfd2b5dc0cdfe2" 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-6/WtgH-sf_kgjzjQt1/images/customization/presence/presence-tooltip.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=86857ff610a08c2fad3191ad7b23bcdf" 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-6/WtgH-sf_kgjzjQt1/images/customization/presence/presence-tooltip-avatar.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=761703c34dae0fb1132832c63a9f1466" 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-6/SW0Ca8JNV5oRKGeB/images/customization/presence/presence-tooltip-avatar-status.png?fit=max&auto=format&n=SW0Ca8JNV5oRKGeB&q=85&s=be5f93a48136c6a1210c37a8b0eb45c6" 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-6/WtgH-sf_kgjzjQt1/images/customization/presence/presence-tooltip-username.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=8164489384f5d9373e7e401f4545330d" 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-6/WtgH-sf_kgjzjQt1/images/customization/presence/presence-tooltip-user-active.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=14ff6ee41240dd8564333fbc648b5ac1" 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-6/WtgH-sf_kgjzjQt1/images/customization/presence/presence-tooltip-user-inactive.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=3b1f88948b25cb28217e18264c3ce448" 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>
