Module C3 · Interfaces (NUI)

Reskin a script's UI colors without breaking it

Most scripts let you change how they look without ever opening the Lua. The colors of a HUD, a menu, or a notification almost always live in a CSS file inside the script's NUI folder. In this lesson you find that file, change a couple of color values, refresh in game, and watch the panel repaint, all without touching a single line that makes the script work. The rule that keeps you safe is simple: change values, never structure.

You'll build: A recolored HUD panel for a real script: same layout, same code, new palette, swapped by editing two CSS variables.
Time: ~16 minutes
You need: A local FiveM practice server you can restart, a script that ships an HTML NUI (its folder has an html/, web/, or ui/ directory), and a text editor (VS Code is free).
You'll learn: Where a script's NUI lives, what a CSS custom property is, how to change values without touching structure, how to refresh in game, and why a built React NUI must be rebuilt while a raw-HTML NUI is edited directly.

BEFORE YOU START

Where a script's UI actually lives

A FiveM script that draws an interface inside the game does it with NUI: a tiny web page (HTML, CSS, JavaScript) that FiveM renders on top of GTA. That web page lives in a folder inside the resource, and the manifest points at it. Open the script's fxmanifest.lua and look for these two keys:

Where a script's UI actually lives

Keep reading the full lesson