> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-3.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-3/C6LWI5jxwnb6UJdP/images/customization/presence/presence-overview.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=17243a630eecd563168d20efa6a0f73f" 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-3/C6LWI5jxwnb6UJdP/images/customization/presence/presence-avatar-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=af63502c1ac0b04b2c3997e7aa189e63" 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-3/C6LWI5jxwnb6UJdP/images/customization/presence/presence-avatar-list-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=f0bf3ec5b5b5428279d77eaba1de0870" 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-3/C6LWI5jxwnb6UJdP/images/customization/presence/presence-avatar-remaining-count.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=493908f97e9ccd47f6f4150d77524301" 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-3/7XdjatzNOROMUuxp/images/customization/presence/presence-tooltip.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=12c5f39ccb87f7e242eb694d17a5fc06" 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-3/7XdjatzNOROMUuxp/images/customization/presence/presence-tooltip-avatar.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=baa5449c7521051b8805d35281455e25" 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-3/C6LWI5jxwnb6UJdP/images/customization/presence/presence-tooltip-avatar-status.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=a49019ee932b6e2288ed261c0f9f71a0" 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-3/7XdjatzNOROMUuxp/images/customization/presence/presence-tooltip-username.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=5cd35cf23f6b04c988823a9f94705fca" 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-3/7XdjatzNOROMUuxp/images/customization/presence/presence-tooltip-user-active.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=29003044c37c4bc3d37cb28875b0452f" 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-3/7XdjatzNOROMUuxp/images/customization/presence/presence-tooltip-user-inactive.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=953960110337d2664c39dedd2eb0d325" 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>
