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

# Subtitles

> Subtitles 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}
> <VeltWireframe>
>     <VeltSubtitlesWireframe>
>         <VeltSubtitlesWireframe.EmbedMode />
>         <VeltSubtitlesWireframe.FloatingMode />
>     </VeltSubtitlesWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-wireframe>
>         <velt-subtitles-embed-mode-wireframe></velt-subtitles-embed-mode-wireframe>
>         <velt-subtitles-floating-mode-wireframe></velt-subtitles-floating-mode-wireframe>
>     </velt-subtitles-wireframe>
> </velt-wireframe>
> ```

## EmbedMode

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/subtitles-embed-mode.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=04cfe1f15dd8e72801aaa4bcd8326570)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.EmbedMode>
>         <VeltSubtitlesWireframe.EmbedMode.Text />
>     </VeltSubtitlesWireframe.EmbedMode>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-embed-mode-wireframe>
>         <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
>     </velt-subtitles-embed-mode-wireframe>
> </velt-wireframe>
> ```

#### Text

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.EmbedMode.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
> </velt-wireframe>
> ```

## FloatingMode

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/subtitles-floating-mode.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=8097d4ec39936dbea7c2ecb55bd48e56)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode>
>         <VeltSubtitlesWireframe.FloatingMode.Button />
>         <VeltSubtitlesWireframe.FloatingMode.Tooltip />
>         <VeltSubtitlesWireframe.FloatingMode.Panel />
>     </VeltSubtitlesWireframe.FloatingMode>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-floating-mode-wireframe>
>         <velt-subtitles-button-wireframe></velt-subtitles-button-wireframe>
>         <velt-subtitles-tooltip-wireframe></velt-subtitles-tooltip-wireframe>
>         <velt-subtitles-panel-wireframe></velt-subtitles-panel-wireframe>
>     </velt-subtitles-floating-mode-wireframe>
> </velt-wireframe>
> ```

#### Button

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/subtitles-floating-mode-button.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=bbf9cb201d829e939d1cbf4e4c3dab6d)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode.Button />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-button-wireframe></velt-subtitles-button-wireframe>
> </velt-wireframe>
> ```

#### Tooltip

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/subtitles-floating-mode-tooltip.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=4a6e52cd71c7823390e294be408b8b99)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-tooltip-wireframe></velt-subtitles-tooltip-wireframe>
> </velt-wireframe>
> ```

#### Panel

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/subtitles-floating-mode-panel.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=89d7649739bfce356d9d8c9443e28f4d)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode.Panel>
>         <VeltSubtitlesWireframe.FloatingMode.CloseButton />
>         <VeltSubtitlesWireframe.FloatingMode.Text />
>     </VeltSubtitlesWireframe.FloatingMode.Panel>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-panel-wireframe>
>         <velt-subtitles-close-button-wireframe></velt-subtitles-close-button-wireframe>
>         <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
>     </velt-subtitles-panel-wireframe>
> </velt-wireframe>
> ```

#### CloseButton

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode.CloseButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-close-button-wireframe></velt-subtitles-close-button-wireframe>
> </velt-wireframe>
> ```

#### Text

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSubtitlesWireframe.FloatingMode.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
> </velt-wireframe>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.