> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-fbea7bba.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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-all-overview.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=9f687b59d0a87bf9935233833374ba5b" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-all.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=f88fdecd461eb16d2da9279d8fa07066" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-audio.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=92822f0ea004cc37c7410d9632135817" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-video.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=31195e65b3a34dbb032b348af3baaf08" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-screen.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=dd7e10744327c746ac53ba844062f733" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-audio-tool.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=760403585564c877ffd7453a0d7b0559" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-video-tool.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=bd0f25d566310a95f57a5e27c7583d6d" 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-fbea7bba/7NUczlilzJ31_QF8/images/customization/recorder/recorder-tool-screen-tool.png?fit=max&auto=format&n=7NUczlilzJ31_QF8&q=85&s=69d0da1925b2c85953152f380ab8e25b" 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>
