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

​
VeltNotificationsToolWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsToolWireframe>
        <VeltNotificationsToolWireframe.Icon />
        <VeltNotificationsToolWireframe.UnreadIcon />
        <VeltNotificationsToolWireframe.UnreadCount />
        <VeltNotificationsToolWireframe.Label />
    </VeltNotificationsToolWireframe>
</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 Example
  • React / Next.js
  • Other Frameworks
<VeltNotificationsTool shadowDom={false} panelShadowDom={false} />

​
Dark Mode

Default: false
  • React / Next.js
  • Other Frameworks
<VeltNotificationsTool darkMode={true} />

​
Variant

You can define and use variants for the Notification Tool or the Notification Panel.
  1. variant: For the Notification Tool.
  2. panelVariant: For the Notification Panel.
  • React / Next.js
  • Other Frameworks
<VeltNotificationsTool variant='tool1' panelVariant='panel1'/>
⌘I