> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-4.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-4/FOR5PEZIovbJJ0-n/images/customization/presence/presence-overview.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=297fc67e8bafe5480cebac8a0d65a32f" 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-4/FOR5PEZIovbJJ0-n/images/customization/presence/presence-avatar-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=b15b102008b6c94a6db92b187cfcb05e" 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-4/FOR5PEZIovbJJ0-n/images/customization/presence/presence-avatar-list-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=00463bc6c02404d983465abb1bae4c80" 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-4/FOR5PEZIovbJJ0-n/images/customization/presence/presence-avatar-remaining-count.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=dcf42102c3dd5b73a759050a2a705d0d" 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-4/Z0uxDnl2U_5ZID8R/images/customization/presence/presence-tooltip.png?fit=max&auto=format&n=Z0uxDnl2U_5ZID8R&q=85&s=a39282d044cfcb2c1a743b6a12670330" 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-4/Z0uxDnl2U_5ZID8R/images/customization/presence/presence-tooltip-avatar.png?fit=max&auto=format&n=Z0uxDnl2U_5ZID8R&q=85&s=0a9f77cea28f2db346726724414cb7aa" 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-4/FOR5PEZIovbJJ0-n/images/customization/presence/presence-tooltip-avatar-status.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=05b5c873a81d657294b9d9b1ba34ea2c" 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-4/Z0uxDnl2U_5ZID8R/images/customization/presence/presence-tooltip-username.png?fit=max&auto=format&n=Z0uxDnl2U_5ZID8R&q=85&s=f5da66d1980969f1a12835702be9e3f4" 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-4/Z0uxDnl2U_5ZID8R/images/customization/presence/presence-tooltip-user-active.png?fit=max&auto=format&n=Z0uxDnl2U_5ZID8R&q=85&s=41be07cec48ded149c84d470ff8d1e3f" 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-4/Z0uxDnl2U_5ZID8R/images/customization/presence/presence-tooltip-user-inactive.png?fit=max&auto=format&n=Z0uxDnl2U_5ZID8R&q=85&s=d8997ff0bba8940057d479936372ac96" 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>
