Skip to main content
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
VeltPresenceWireframe

presence-overview.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceWireframe>
        <VeltPresenceWireframe.AvatarList />
        <VeltPresenceWireframe.AvatarRemainingCount />
    </VeltPresenceWireframe>
</VeltWireframe>

​
AvatarList

presence-avatar-list.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceWireframe.AvatarList>
        <VeltPresenceWireframe.AvatarList.Item />
    </VeltPresenceWireframe.AvatarList>
</VeltWireframe>

​
Item

presence-avatar-list-item.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceWireframe.AvatarList.Item />
</VeltWireframe>

​
AvatarRemainingCount

presence-avatar-remaining-count.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceWireframe.AvatarRemainingCount />
</VeltWireframe>

​
VeltPresenceTooltipWireframe

presence-tooltip.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe>
        <VeltPresenceTooltipWireframe.Avatar />
        <VeltPresenceTooltipWireframe.StatusContainer />
    </VeltPresenceTooltipWireframe>
</VeltWireframe>

​
Avatar

presence-tooltip-avatar.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe.Avatar />
</VeltWireframe>

​
StatusContainer

presence-tooltip-avatar-status.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe.StatusContainer>
        <VeltPresenceTooltipWireframe.UserName />
        <VeltPresenceTooltipWireframe.UserActive />
        <VeltPresenceTooltipWireframe.UserInactive />
    </VeltPresenceTooltipWireframe.StatusContainer>
</VeltWireframe>

​
UserName

presence-tooltip-username.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserName />
</VeltWireframe>

​
UserActive

presence-tooltip-user-active.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserActive />
</VeltWireframe>

​
UserInactive

presence-tooltip-user-inactive.png
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserInactive />
</VeltWireframe>

​
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
  • React / Next.js
  • Other Frameworks
<VeltPresence shadowDom={false} />
⌘I