> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-da95e4d7.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-mintlify-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-all-overview.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=d4324d5df6930ae071f9d9455d80baa8" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-all.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=6bdb608843f3209c28f024b53f5bcc48" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-audio.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=ad67e3153ddcb8124ee8fa33d5bf13e3" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-video.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=577eac6bedabb9df1f979b69f623aff3" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-screen.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=c067dadba08c80749f000323ae184585" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-audio-tool.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=6da21c8705334887599fe835cda93836" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-video-tool.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=015595e342281ddb08fa59a46ea5d38e" 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-da95e4d7/U8XBLNx-hf-sCEY_/images/customization/recorder/recorder-tool-screen-tool.png?fit=max&auto=format&n=U8XBLNx-hf-sCEY_&q=85&s=d7f38c045d967f8301f5d0e5976f7810" 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>
