# Floating UI

## Overview

The **Floating UI** tool enables the integration of UI elements into a project, including buttons, sliders, images, text, and more. These elements can either remain fixed on the screen or be dynamically positioned relative to 3D objects, allowing for greater flexibility in user interaction and visual presentation.<br>

* **Floating UI** elements can be always visible or appear in response to user interactions, such as clicking on objects or hotspots within the scene.
* Combining UI with [interactions](https://open-2v.gitbook.com/url/help.vectary.com/documentation/3d-configurator/interactions "mention") allows for the creation of more advanced and interactive experiences.
* UI elements can either be part of the 3D canvas or exist independently from it, ensuring that interface components do not interfere with 3D objects. This alternative mode, known as **Docked UI**, can be configured in the [**Floating UI** settings](https://open-2v.gitbook.com/url/help.vectary.com/documentation/3d-configurator/floating-ui/floating-ui-settings).

{% hint style="info" %}
Switch to **Preview Mode** to view all Floating UI elements simultaneously and test their functionality
{% endhint %}

## Elements

**Floating UI** itself serves as a container for **UI elements**. After adding a **Floating UI**, elements must be placed inside it to build the interface.

Available UI elements:

<table><thead><tr><th width="166.79296875"></th><th></th></tr></thead><tbody><tr><td><a data-mention href="floating-ui/container">container</a></td><td>structural element for grouping other UI elements</td></tr><tr><td><a data-mention href="floating-ui/materials-ui">materials-ui</a></td><td>element for switching materials <mark style="color:$info;">(can be configured as a dropdown menu or swatches)</mark></td></tr><tr><td><a data-mention href="floating-ui/variants-ui">variants-ui</a></td><td>element for switching objects <mark style="color:$info;">(can be configured as a dropdown menu or swatches)</mark></td></tr><tr><td><a data-mention href="floating-ui/text">text</a></td><td>element for displaying text within the UI</td></tr><tr><td><a data-mention href="floating-ui/image">image</a></td><td>element for displaying <strong>images</strong>, <strong>videos</strong>, <strong>GIFs</strong>, or <strong>Lottie</strong> animations</td></tr><tr><td><a data-mention href="floating-ui/button">button</a></td><td>button element designed to trigger <a href="interactions/actions">actions</a></td></tr><tr><td><a data-mention href="floating-ui/slider">slider</a></td><td>element in the form of a slider that allows changing <a href="variables-and-expressions">variable</a> values</td></tr><tr><td><a data-mention href="floating-ui/input">input</a></td><td>input field for entering text or numerical values to modify variable values</td></tr><tr><td><a data-mention href="floating-ui/embed">embed</a></td><td>element that allows embedding an external <strong>link</strong> or <strong>code block</strong></td></tr><tr><td><a data-mention href="floating-ui/color">color</a></td><td></td></tr></tbody></table>

## Tutorials

{% embed url="<https://youtu.be/vzc6fhgSrDE>" %}

{% embed url="<https://youtu.be/mvn-V3JIrhU>" %}

{% embed url="<https://youtu.be/E9qo5sjc_n0?si=-4_HYuFNzdBifTkS>" %}

{% embed url="<https://youtu.be/9ZkMtQlxJAk?si=uodzfyHUdFWUK8Px>" %}