> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-self-hosting-docs-restructure-ld0nln.mintlify.site/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](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe>
            <VeltSubtitlesWireframe.EmbedMode />
            <VeltSubtitlesWireframe.FloatingMode />
        </VeltSubtitlesWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## EmbedMode

<img src="https://mintcdn.com/velt-claude-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/subtitles-embed-mode.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=ebf886a347da20d91a978ac2a0658870" alt="" width="1280" height="364" data-path="images/customization/recorder/subtitles-embed-mode.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.EmbedMode>
            <VeltSubtitlesWireframe.EmbedMode.Text />
        </VeltSubtitlesWireframe.EmbedMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Text

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.EmbedMode.Text />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## FloatingMode

<img src="https://mintcdn.com/velt-claude-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/subtitles-floating-mode.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=6e69730b9797d9f704e681947331570a" alt="" width="1280" height="570" data-path="images/customization/recorder/subtitles-floating-mode.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode>
            <VeltSubtitlesWireframe.FloatingMode.Button />
            <VeltSubtitlesWireframe.FloatingMode.Tooltip />
            <VeltSubtitlesWireframe.FloatingMode.Panel />
        </VeltSubtitlesWireframe.FloatingMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Button

<img src="https://mintcdn.com/velt-claude-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/subtitles-floating-mode-button.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=70870b97064c42a22e657cc4d518f0da" alt="" width="1280" height="330" data-path="images/customization/recorder/subtitles-floating-mode-button.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode.Button />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-subtitles-button-wireframe></velt-subtitles-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Tooltip

<img src="https://mintcdn.com/velt-claude-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/subtitles-floating-mode-tooltip.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=62697f91d4831e270f9c8a2724986fa0" alt="" width="1280" height="330" data-path="images/customization/recorder/subtitles-floating-mode-tooltip.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-subtitles-tooltip-wireframe></velt-subtitles-tooltip-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Panel

<img src="https://mintcdn.com/velt-claude-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/subtitles-floating-mode-panel.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=a2b2e0047a90ac244a7f0216dd7dfe73" alt="" width="1280" height="329" data-path="images/customization/recorder/subtitles-floating-mode-panel.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode.Panel>
            <VeltSubtitlesWireframe.FloatingMode.CloseButton />
            <VeltSubtitlesWireframe.FloatingMode.Text />
        </VeltSubtitlesWireframe.FloatingMode.Panel>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### CloseButton

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

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

#### Text

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSubtitlesWireframe.FloatingMode.Text />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-subtitles-text-wireframe></velt-subtitles-text-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
