> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.mintlify.site/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](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltRecorderAllToolWireframe

<img src="https://mintcdn.com/velt-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-all-overview.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=9e1beeb55a49480cecc9af807ccbdd29" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-all.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=7d79fdf5b6bc67a4645007844361f9a3" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-audio.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=20494156d1710156865f2b858a6fe42d" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-video.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=c64d76f1cd666cd9c69d3f8c1ef54851" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-screen.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=8a92be80c4dc2b050cf429d0af656038" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-audio-tool.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=9d07a2651eccbdaf4bcb4d1b36010019" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-video-tool.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=b06f00658069dc260feead4db9f891d4" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-tool-screen-tool.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=3af1b2a472fa8ac311cbac0f058c4cb5" 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>
