> 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.md).

# UI Manager

UI Manager is a powerful utility script designed for FiveM. It acts as a central integration tool that helps developers and players easily manage, align, and customize their NUI!

***

<figure><img src="https://2631561179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQrdhokXRIS4LFzUEJsVO%2Fuploads%2FBjEYZdo1rCiLwqnqS4Br%2Fcover.png?alt=media&amp;token=4d271426-5ab0-4393-82e3-f76cb06095da" alt=""><figcaption></figcaption></figure>

***

## Core Features

#### 🗺️ Built-in Draggable Minimap

Unlike standard HUD resources that only handle HTML elements, this utility features a fully integrated, draggable native minimap. Players can move and position their radar anywhere on the screen alongside their other UI components, ensuring a perfectly synchronized layout.

***

#### ⚙️ Menu Settings

The main control panel offers several tools to manage your layouts efficiently:

* **Presets:** Allows users to save and seamlessly switch between up to 3 different customized UI layouts.
* **Reset to Default:** Instantly reverts all UI components back to their original, developer-defined starting positions.
* **Undo:** Reverses the very last movement made to any component.
* **Revert:** Discards all unsaved movements and restores the layout to its last saved state.
* **Save:** Commits the current positions to the local storage (KVP), ensuring the layout persists across sessions.

***

#### 🖱️ Drag Settings

To help players achieve clean and organized layouts, the script includes built-in alignment tools:

* **Guidelines:** Displays visual reference lines (vertical and horizontal) across the screen when moving elements. This makes it easy to align components with the center of the screen or with other elements.
* **Snapping:** When enabled, components will automatically "pull" and lock into place when dragged close to a guideline or another UI element. This ensures pixel-perfect alignment without manual guessing.

***

<div><figure><img src="https://2631561179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQrdhokXRIS4LFzUEJsVO%2Fuploads%2FQXsdIspdzmR0AC7fJE5m%2Fmenusettings.png?alt=media&amp;token=c5af85e8-6fc5-449f-b2ba-2dbb40688dde" alt=""><figcaption></figcaption></figure> <figure><img src="https://2631561179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQrdhokXRIS4LFzUEJsVO%2Fuploads%2FQaYRF1NI4l8wScwjoOG9%2Fdragsettings.png?alt=media&amp;token=a54ac932-228f-4ff1-bb63-13c0fa48612a" alt=""><figcaption></figcaption></figure></div>

***

### 🎬 Video preview

{% embed url="<https://www.youtube.com/watch?v=I8I29_Zamso>" %}

***

### \</> For Developers: A NUI Integration Utility

At its core, UI Manager is built as a utility tool. It does not force a specific HUD design on you; instead, it provides a clean API (using exports and events) to register your own custom UI components. Once registered, the script automatically handles the drag-and-drop logic, coordinate calculation, and local storage saving for your resources.