> ## 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.
# Recording Preview Steps Dialog
> Recording preview steps dialog component.
> [!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.
## Overview
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
### Audio
This component is used for audio recording preview.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Audio Bottom Panel
Bottom panel of the audio recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### Icon
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Countdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Close
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Audio Button Panel
Button panel of the audio recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### Start Recording
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Mic Button
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
> ```
###### On
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
###### Off
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Settings
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Audio Timer
Timer of the audio recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
> ```
##### Countdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Cancel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Close Button
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Waveform
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Settings Panel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
### Video
This component is used for both video and screen recording previews.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
> ```
#### Video Bottom Panel
Bottom panel of the video recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> // If you want to customize the Icon for individual media types, you can use the following:
>
>
> {/* Your custom icon here */}
>
>
>
> {/* Your custom icon here */}
>
>
>
> {/* Your custom icon here */}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
##### Icon
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> // To customize for a specific media type:
> {/* audio icon */}
> {/* video icon */}
> {/* screen icon */}
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### Countdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Close
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Video Button Panel
Button panel of the video recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
##### Start Recording
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Mic Button
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
> ```
###### On
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
###### Off
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Camera Button
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
> ```
###### On
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
###### Off
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Settings
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Video Timer
Timer of the video recording preview dialog.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
> ```
##### Countdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
##### Cancel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Waveform
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Close Button
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Camera Off Message
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Settings Panel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### Video Player
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
#### ScreenPlayer (Video)
This component is used for screen recording preview within the video dialog. It displays the screen capture content for screen recordings.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.