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

​
VeltRecorderAllToolWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAllToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderAllToolWireframe>
</VeltWireframe>

​
VeltRecorderAllToolMenuWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe>
        <VeltRecorderAllToolMenuWireframe.Audio>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Audio>
        <VeltRecorderAllToolMenuWireframe.Video>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Video>
        <VeltRecorderAllToolMenuWireframe.Screen>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Screen>
    </VeltRecorderAllToolMenuWireframe>
</VeltWireframe>

​
Audio

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Audio>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Audio>
</VeltWireframe>

​
Video

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Video>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Video>
</VeltWireframe>

​
Screen

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Screen>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Screen>
</VeltWireframe>

​
VeltRecorderAudioToolWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderAudioToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderAudioToolWireframe>
</VeltWireframe>

​
VeltRecorderVideoToolWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderVideoToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderVideoToolWireframe>
</VeltWireframe>

​
VeltRecorderScreenToolWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderScreenToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderScreenToolWireframe>
</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
<VeltRecorderTool shadowDom={false} />

​
Dark Mode

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