> ## Documentation Index > Fetch the complete documentation index at: https://velt-raghul-agent-docs.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. We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. ## VeltPresenceWireframe presence-overview.png ```jsx theme={null} ``` ```html theme={null} ``` ### AvatarList presence-avatar-list.png ```jsx theme={null} ``` ```html theme={null} ``` #### Item presence-avatar-list-item.png ```jsx theme={null} ``` ```html theme={null} ``` ### AvatarRemainingCount presence-avatar-remaining-count.png ```jsx theme={null} ``` ```html theme={null} ``` ## VeltPresenceTooltipWireframe presence-tooltip.png ```jsx theme={null} ``` ```html theme={null} ``` ### Avatar presence-tooltip-avatar.png ```jsx theme={null} ``` ```html theme={null} ``` ### StatusContainer presence-tooltip-avatar-status.png ```jsx theme={null} ``` ```html theme={null} ``` #### UserName presence-tooltip-username.png ```jsx theme={null} ``` ```html theme={null} ``` #### UserActive presence-tooltip-user-active.png ```jsx theme={null} ``` ```html theme={null} ``` #### UserInactive presence-tooltip-user-inactive.png ```jsx theme={null} ``` ```html theme={null} ``` ## 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` ```jsx theme={null} ``` ```jsx theme={null} ```