Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltSidebarButtonWireframe>
<VeltSidebarButtonWireframe.Icon />
<VeltSidebarButtonWireframe.CommentsCount />
<VeltSidebarButtonWireframe.UnreadIcon />
</VeltSidebarButtonWireframe>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-sidebar-button-wireframe>
<velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
<velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
<velt-sidebar-button-unread-icon-wireframe></velt-sidebar-button-unread-icon-wireframe>
</velt-sidebar-button-wireframe>
</velt-wireframe>
Icon
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltSidebarButtonWireframe.Icon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
</velt-wireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltSidebarButtonWireframe.CommentsCount />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
</velt-wireframe>
UnreadIcon
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltSidebarButtonWireframe.UnreadIcon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-sidebar-button-unread-icon-wireframe></velt-sidebar-button-unread-icon-wireframe>
</velt-wireframe>
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
Example
<VeltSidebarButton shadowDom={false} />
{/* If you use floating mode, you can turn off the shadow dom for the sidebar using this: */}
<VeltSidebarButton shadowDom={false} sidebarShadowDom={false} />
Example
<velt-sidebar-button shadow-dom="false"></velt-sidebar-button>
<!-- If you use floating mode, you can turn off the shadow dom for the sidebar using this: -->
<velt-sidebar-button shadow-dom="false" sidebar-shadow-dom="false"></velt-sidebar-button>
Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
Default: false
To enable Dark Mode for sidebar button:
React / Next.js
Other Frameworks
Example
<VeltSidebarButton darkMode={true} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Example
<velt-sidebar-button dark-mode="true"></velt-sidebar-button>
API methods
const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
