> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder Tool

> The button to add new recordings.

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## VeltRecorderAllToolWireframe

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-all-overview.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=a0ec3bea719e86e238138ea3c428caaf)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderAllToolWireframe>
>         {/* ... Add your content here */}
>     </VeltRecorderAllToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-all-tool-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-all-tool-wireframe>
> </velt-wireframe>
> ```

### VeltRecorderAllToolMenuWireframe

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-all.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=332477b48f02e54ee496ae20a9c9643a)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <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>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-all-tool-menu-wireframe>
>         <velt-recorder-all-tool-menu-audio-wireframe>
>             <!-- ... Add your content here -->
>         </velt-recorder-all-tool-menu-audio-wireframe>
>         <velt-recorder-all-tool-menu-video-wireframe>
>             <!-- ... Add your content here -->
>         </velt-recorder-all-tool-menu-video-wireframe>
>         <velt-recorder-all-tool-menu-screen-wireframe>
>             <!-- ... Add your content here -->
>         </velt-recorder-all-tool-menu-screen-wireframe>
>     </velt-recorder-all-tool-menu-wireframe>
> </velt-wireframe>
> ```

#### Audio

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-audio.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=1b656fcbba01d80e75e0786537245829)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderAllToolMenuWireframe.Audio>
>         {/* ... Add your content here */}
>     </VeltRecorderAllToolMenuWireframe.Audio>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-all-tool-menu-audio-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-all-tool-menu-audio-wireframe>
> </velt-wireframe>
> ```

#### Video

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-video.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=7ef8c28c9b896a1980f4606d069a974e)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderAllToolMenuWireframe.Video>
>         {/* ... Add your content here */}
>     </VeltRecorderAllToolMenuWireframe.Video>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-all-tool-menu-video-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-all-tool-menu-video-wireframe>
> </velt-wireframe>
> ```

#### Screen

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-screen.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=7cffe2ba8b8b236f31fe52162b3e3309)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderAllToolMenuWireframe.Screen>
>         {/* ... Add your content here */}
>     </VeltRecorderAllToolMenuWireframe.Screen>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-all-tool-menu-screen-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-all-tool-menu-screen-wireframe>
> </velt-wireframe>
> ```

## VeltRecorderAudioToolWireframe

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-audio-tool.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=1cc2a1240e3ab660541bae6d0a5391eb)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderAudioToolWireframe>
>         {/* ... Add your content here */}
>     </VeltRecorderAudioToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-audio-tool-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-audio-tool-wireframe>
> </velt-wireframe>
> ```

## VeltRecorderVideoToolWireframe

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-video-tool.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=44cb6edcb6a586ff38b1b6c72b5f87ff)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderVideoToolWireframe>
>         {/* ... Add your content here */}
>     </VeltRecorderVideoToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-video-tool-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-video-tool-wireframe>
> </velt-wireframe>
> ```

## VeltRecorderScreenToolWireframe

![](https://mintcdn.com/velt/LXtB63anAqSBApya/images/customization/recorder/recorder-tool-screen-tool.png?fit=max\&auto=format\&n=LXtB63anAqSBApya\&q=85\&s=86d6a5e309fae7a4c86eb3c59d642e59)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltRecorderScreenToolWireframe>
>         {/* ... Add your content here */}
>     </VeltRecorderScreenToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-recorder-screen-tool-wireframe>
>         <!-- ... Add your content here -->
>     </velt-recorder-screen-tool-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`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltRecorderTool shadowDom={false} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-tool shadow-dom="false"></velt-recorder-tool>
> ```

## Dark Mode

`Default: false`

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltRecorderTool darkMode={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-tool dark-mode="true"></velt-recorder-tool>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.