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

# Recorder Tool

> Customize the Velt Recorder Tool — the trigger button used to start new screen, camera, and audio recordings, with wireframe and slot-based overrides.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltRecorderAllToolWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-all-overview.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=5a7af5b509a5f599edfff5ced4dcc858" alt="" width="1280" height="720" data-path="images/customization/recorder/recorder-tool-all-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderAllToolWireframe>
            {/* ... Add your content here */}
        </VeltRecorderAllToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### VeltRecorderAllToolMenuWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-all.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=d7f27f9ee87b3850287ff641648f888c" alt="" width="1280" height="464" data-path="images/customization/recorder/recorder-tool-all.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Audio

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-audio.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=d8a30fd861714078f1a74bb2cce15461" alt="" width="1280" height="464" data-path="images/customization/recorder/recorder-tool-audio.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderAllToolMenuWireframe.Audio>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Audio>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Video

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-video.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=6ddb3435bb77e9369427135237b40dc3" alt="" width="1280" height="464" data-path="images/customization/recorder/recorder-tool-video.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderAllToolMenuWireframe.Video>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Video>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Screen

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-screen.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=b2fb7d4e85a390f94467e047e04a1855" alt="" width="1280" height="464" data-path="images/customization/recorder/recorder-tool-screen.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderAllToolMenuWireframe.Screen>
            {/* ... Add your content here */}
        </VeltRecorderAllToolMenuWireframe.Screen>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## VeltRecorderAudioToolWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-audio-tool.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=7d0c7883631909be4e7f5c12ebf97879" alt="" width="1280" height="296" data-path="images/customization/recorder/recorder-tool-audio-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderAudioToolWireframe>
            {/* ... Add your content here */}
        </VeltRecorderAudioToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## VeltRecorderVideoToolWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-video-tool.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=b281caaebabadce25fb534a25d3cd4d7" alt="" width="1280" height="296" data-path="images/customization/recorder/recorder-tool-video-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderVideoToolWireframe>
            {/* ... Add your content here */}
        </VeltRecorderVideoToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## VeltRecorderScreenToolWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/MhMZikCu_HhSYlqM/images/customization/recorder/recorder-tool-screen-tool.png?fit=max&auto=format&n=MhMZikCu_HhSYlqM&q=85&s=bd7ac4177a79a89d45cd519265858e5d" alt="" width="1280" height="296" data-path="images/customization/recorder/recorder-tool-screen-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderScreenToolWireframe>
            {/* ... Add your content here */}
        </VeltRecorderScreenToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

# 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`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltRecorderTool shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-tool shadow-dom="false"></velt-recorder-tool>
    ```
  </Tab>
</Tabs>

## Dark Mode

`Default: false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltRecorderTool darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-tool dark-mode="true"></velt-recorder-tool>
    ```
  </Tab>
</Tabs>
