> For the complete documentation index, see [llms.txt](https://codeflow-scripts.gitbook.io/codeflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codeflow-scripts.gitbook.io/codeflow/utility/ui-manager/installation.md).

# Installation

How to install and setup the UI Manager?

***

Follow these steps to add it to your FiveM server:

1. **Download** the latest version from the <mark style="color:$warning;">repository</mark>.
2. **Extract** the `ui_manager` folder into your server's `resources` directory.
3. **Add** the start command to your `server.cfg`:

```bash
ensure ui_manager
```

***

### Example Resource

To help developers understand the integration process, a separate example resource named `hud` is available on the release page alongside the main script. This serves as a practical, open-source example of how to connect and synchronize a custom HTML/JS interface with the UI Manager.

{% hint style="danger" %}
The `hud` is a purely visual test interface. The status rings (health, armor, hunger, etc.) do not actually function or update based on your in-game stats. It exists solely to demonstrate the drag-and-drop code integration.
{% endhint %}

How to test the example:

1. **Download:** Get the `hud` file from the release page and extract it.
2. **Install:** Move the `hud` folder into your server's `resources` directory.
3. **Configure:** Open your `server.cfg` and add `ensure hud`.
4. **Test:** Restart your server. The test HUD will appear on your screen and will be fully draggable when you open the UI Manager.