Lumo Interface Suite

HUD, notifications, target, radial, menus, input, progress and text UI in one React page.

Version 1.2.2 · Frameworks QBCore · Qbox · ESX · standalone · Requires oxmysql

Installation · Config files · Exports & events · Changelog

One resource for the whole interface layer of a FiveM server, drawn by a single React page:

Module	Replaces
HUD (status, vehicle, aircraft, compass, voice, buffs, crosshair, minimap)	qb-hud, most HUD scripts
Notifications	QBCore / ESX / Qbox notify
Target eye (zones, models, entities, bones, globals, peds)	qb-target, qtarget
Radial menu (self actions + seated vehicle menu)	qb-radialmenu
Context menu	qb-menu
Input dialog	qb-input
Progress bar	progressbar
Text UI (2D prompts and 3D world labels)	DrawText / text UI scripts
Timers, minigame bars, key hints, noise meter	—
/ui settings: player layout editor + admin server settings	—

Two looks ship in one build: Classic (lime) and Circle (round minimap, white accent). Players pick in /ui; admins set the server name, accents and limits there for everyone.

Frameworks: QBCore, Qbox, ESX and standalone, detected at start. Nothing needs to be configured for the framework.

Install

Step-by-step guide for QBCore, Qbox, ESX and standalone, with what to remove, which files to edit and how to fix affected resources: Installation. The short version:

1. Drop the [lumo-ui] folder into resources/.

2. In server.cfg, right after your framework and oxmysql:

   ensure lumo-ui
   ensure lumo-interact   # walk-up key prompts; see lumo-interact/README.md
   ensure lumo-chat-theme # chat look + /me; after `chat`
   # Drop-in shims: only the ones you need. Remove the original resource first.
   ensure qb-target       # also answers to qtarget (not on Qbox: keep ox_target)
   ensure qb-menu
   ensure qb-input
   ensure qb-radialmenu
   ensure progressbar
   # ESX servers only, instead of the ones in [core]:
   # ensure esx_notify
   # ensure esx_progressbar
   # ensure esx_textui

3. Move the resources the shims replace out of resources/: qb-hud, qb-target/qtarget, qb-menu, qb-input, qb-radialmenu, progressbar (ESX: esx_notify, esx_progressbar, esx_textui from [core]). Two resources with the same name will not start. Delete the shims you don't use.

4. Give admins the /ui server tab:

   add_ace group.admin lumo.ui.admin allow

   On QBCore/Qbox the god and admin permissions also count (LumoUiConfig.AdminPermissions).

5. Restart the server. Press F1 for the radial, hold Left Alt for the target eye, type /ui for settings.

Your existing scripts keep working: the shims answer the same exports and events (exports['qb-target']:AddBoxZone, qb-menu:client:openMenu, exports['progressbar']:Progress, …). See Migration for notify routing, ESX/Qbox notes and what to remove.

Configure

Everything is in config.lua, one section per module:

• LumoUiConfig.PlayerDefaults — the look a new player starts with (preset, which panels show, minimap mode, layout).
• LumoUiConfig.AdminDefaults — server name, accent colours, notification limits. Changed live from /ui → Server; saved to data/admin-settings.json.
• LumoUiConfig.Hud — MPH/KMH, seatbelt, fuel source, stress, which weapons hide the ammo panel, minimap masks.
• LumoUiConfig.Target — key, distance, zone markers, passive hints.
• LumoUiConfig.Radial — key, items, per-job items, the vehicle menu, labels.
• LumoUiConfig.Progress, LumoUiConfig.Menu — cancel key, image path.

The HUD, target eye and radial each have Enabled = false in their section if you keep another script for that job (then leave its shim out too).

For developers

Every export and event is listed in API. The short version:

exports['lumo-ui']:Notify('Saved', 'success', 4000)
exports['lumo-ui']:ShowText('[E] Open stash')
exports['lumo-ui']:AddBoxZone('stash', vec3(0, 0, 70), 2.0, 2.0, { heading = 0 }, {
    options = { { label = 'Open stash', icon = 'fas fa-box', event = 'myres:openStash' } },
    distance = 2.0,
})
exports['lumo-ui']:AddRadialOption({ id = 'mdt', title = 'MDT', icon = 'tablet', type = 'command', event = 'mdt' })

Building the UI (open-source edition)

npm install
npm run build      # type-check + vite build into dist/
npm run dev        # browser preview on :5173

Theme tokens live in src/theme.css. FiveM's browser is an older Chromium: backdrop-filter and color-mix() do not work there, so the glass panels are layered rgba.

Support

Open a ticket through the store you bought from. Include your framework, the F8 console error, and the resource that called lumo-ui.

Credits

Fonts: Barlow and Oxanium, SIL Open Font License (texts in dist/fonts). Icons: drawn by the UI itself. Font Awesome style names (fas fa-box, box) used by existing scripts are mapped to the built-in set; unknown names get a neutral icon. Emoji and image paths are drawn as given.

Temporary HUD hiding for activities

exports['lumo-ui']:SetHudHidden(true) hides the HUD, custom minimap frame and native radar for the calling resource. Call it with false when the activity closes. Requests compose across resources, release automatically on resource stop, and preserve player HUD settings and hud:client:SetHudVisibility. exports['lumo-ui']:IsHudHidden() reports the combined suppression state.