A modern and configurable HUD resource for FiveM, built for QBox, QBCore and ESX.
Player HUD · Vehicle HUD · Helicopter HUD · Persistent Settings
This project is source available, not open source under an OSI-approved licence.
You may use and modify the resource, but redistribution and resale are prohibited.
Displays important player information such as:
- Health
- Armour
- Hunger
- Thirst
- Stress
- Stamina
- Voice activity
- Voice proximity
- Radio activity
Includes information such as:
- Speed
- RPM
- Current gear
- Fuel
- Engine health
- Seatbelt status
- Harness status
- Nitrous status
- Street and area information
- Camera direction
The speed unit can be configured for either:
KM/TMPH
Vehicles classified as helicopters use a dedicated HUD with additional flight information:
- Altitude
- Pitch
- Roll
- Speed
- Fuel
- Engine health
Player settings are saved and loaded through FiveM KVP.
This allows players to keep their HUD preferences after reconnecting or restarting the game.
| Framework | Status |
|---|---|
QBox / qbx_core |
Supported |
QBCore / qb-core |
Supported |
ESX / es_extended |
Supported |
The resource automatically loads the appropriate framework bridge depending on which framework is running.
The HUD is integrated with:
This integration can be replaced or modified if your server uses another stress system.
The vehicle HUD supports nitrous information from:
The nitrous integration is isolated and can easily be changed to support another resource or state-bag structure.
- FiveM
- One of the supported frameworks:
qbx_coreqb-corees_extended
ox_lib- A compiled frontend build
Optional integrations:
jg-stress-addonmalice_nitro- A compatible seatbelt or harness resource
- Download or clone the repository.
git clone https://github.com/Thomasdev18/element_hud.git- Place the resource inside your server resources directory.
resources/
└── [element]/
└── element_hud/
- Install and build the frontend dependencies if the compiled files are not already included.
cd web
npm install
npm run buildUse the package manager configured by the project if it differs from npm.
- Add the resource to your
server.cfg.
ensure ox_lib
ensure qbx_core
ensure element_hudFor QBCore:
ensure ox_lib
ensure qb-core
ensure element_hudFor ESX:
ensure ox_lib
ensure es_extended
ensure element_hudThe exact configuration structure may differ depending on the current version of the resource.
The framework-specific logic is separated into bridge modules.
bridge/
├── qb.lua
├── qbx.lua
└── esx.lua
This keeps the main HUD logic framework-independent and makes it easier to add support for other frameworks later.
The frontend is built with:
- React
- TypeScript
- Mantine
- Zustand
Copyright © 2026 Element. All rights reserved.
This project is distributed under the Element Source-Available License Version 1.0.
You may:
- View and download the source code
- Use the resource on a server or project operated by you
- Modify the resource for personal or internal use
- Use it on a commercially operated or monetised FiveM server
- Create a GitHub fork for development or contributing
You may not:
- Sell or resell the resource
- Sell modified versions of the resource
- Include it in a paid server pack
- Sublicense the resource
- Offer copies of the resource in exchange for payment
- Remove copyright or licence notices
- Claim the original work as your own
See the LICENSE file for the complete licence terms.
For questions, bug reports or feature suggestions, use one of the following:
- Open a GitHub issue
- Join the Element Discord
- Submit a pull request
When reporting a problem, include:
- Framework and version
- Relevant console errors
- Steps to reproduce the issue
- Any modifications made to the resource
Created and maintained by Thomas.
Additional integrations: