Introducing JGS Modern HUD for FiveM, a comprehensive and sophisticated addition to
This HUD boasts a minimalist design that not only looks fantastic but also offers complete configurability to tailor your gaming experience to your preferences.
With JGS Modern HUD you gain access to a wide range of essential features:
Features
Health and Armor Monitoring: Monitor your health and armor instantly, and be informed at all times of your character’s stats with modern aesthetics!
Hunger and Thirst Gauges: Manage your character’s nutrition and hydration with simple and modern gauges.
PMA Voice Microphone Integration: Improve roleplay communication with an integrated microphone that displays voice range.
Vehicle HUD: Check your vehicle’s speed and fuel level in real time for safer and more controlled driving, with belt systems and fuel counters that will keep your players informed at >all times.
Server Logo Customization: Customize your server with a unique logo in the upper right corner.
Notifications: Receive clear and fast alerts so you don’t miss any important detail, with the possibility of configuring the types of notifications in the Configuration file and thousands of possible combinations to make this system, a unique aesthetic for your server!
Help Notify: Enjoy elegant and direct access to crucial information on screen, with configurable on-screen Keys and modern pop-up options.
Progressbar: Easily view the progress of ongoing actions with a dynamic and customizable design, with a choice of two types of Progressbar (circle or bar).
Streets: Stay oriented with the current street name always visible on top of the minimap!
Modern HUD combines functionality and aesthetics seamlessly, allowing you to fully immerse yourself in your FiveM adventures while maintaining control and awareness. Configure it to match your playstyle and preferences, and elevate your gaming experience to a new level of sophistication and immersion.
Click here to watch Showcase
In this section you will be able to see how to edit and configure the HUD in a personalized way so that you can adapt each function offered by our script to your needs.
1. Tailwind Config
Our HUD script is designed and built using a responsive technology that, through Tailwind, helps the project to be fully adaptable to any resolution.
In addition, it has an interactive file so that each user can quickly configure the most important parameters in the visual environment of the HUD, such as the main color that by default will be blue.
if (!tailwind) tailwind = {};
tailwind.config = {
theme: {
extend: {
colors: {
primary: 'rgba(0, 136, 204, 255)\n',
},
fontFamily: {
onest: ['Onest', 'sans-serif'],
rajdhani: ['Rajdhani', 'sans-serif'],
},
boxShadow: {
'dynamic': '0 0 .4vw rgba(0, 0, 0, 0.665)',
},
dropShadow: {
'dynamic': '0 0 .4vw rgba(0, 0, 0, .665)',
},
}
}
};
2. Main File
Next we will share the Config.lua file that will allow our customers to configure the script as much as they want:
Config = {}
Config.GeneralSettings = {
AlwaysMinimap = false,
Logo = 'https://i.postimg.cc/pLnnLRD7/logo.png',
ToggleCommand = 'toghud',
CinematicCommand = 'cine',
}
Config.CustomMinimap = {
Enable = true,
Colors = {
['red'] = 0,
['green'] = 136,
['blue'] = 204,
['alpha'] = 100
}
}
Config.Speedometer = {
Enable = true,
CountSystem = 'kmh', -- kmh or mph (change it too in the html file)
Ticktime = 50, -- ms
Seatbelt = {
Enable = true,
Command = 'seatbelt',
Key = {
Enable = true,
Bind = 'b',
Description = 'Toggle Seatbelt'
}
},
}
Config.Notify = {
Types = {
['info'] = {
title = 'Information',
icon = 'fa-thin fa-info-circle',
boxColor = 'rgba(0, 123, 255, 0.3)',
titleColor = '#007bff',
},
['success'] = {
title = 'Success',
icon = 'fa-thin fa-badge-check',
boxColor = 'rgba(40, 167, 69, 0.3)',
titleColor = '#28a745',
},
['warn'] = {
title = 'Warning',
icon = 'fa-thin fa-exclamation-triangle',
boxColor = 'rgba(255, 193, 7, 0.3)',
titleColor = '#ffc107',
},
['error'] = {
title = 'Error',
icon = 'fa-thin fa-exclamation-circle',
boxColor = 'rgba(220, 53, 69, 0.3)',
titleColor = '#dc3545',
},
['bank'] = {
title = 'Bank',
icon = 'fa-thin fa-university',
boxColor = 'rgba(23, 162, 184, 0.3)',
titleColor = '#17a2b8',
},
['sms'] = {
title = 'SMS',
icon = 'fa-thin fa-comment-alt',
boxColor = 'rgba(0, 136, 204, 0.3)',
titleColor = '#0088cc',
},
},
Colors = {
Colors = {
['~r~'] = {
type = 'color',
replace = 'rgba(255, 0, 0, 1)',
},
['~g~'] = {
type = 'color',
replace = 'rgba(37,211,102,1)',
},
['~b~'] = {
type = 'color',
replace = 'rgba(29,161,242,1)',
},
['~y~'] = {
type = 'color',
replace = 'rgba(255, 255, 0, 1)',
},
['~w~'] = {
type = 'color',
replace = 'rgba(255, 255, 255, 1)',
},
['~s~'] = {
type = 'end',
replace = '</span>',
},
['\n'] = {
type = 'end',
replace = '<br>'
},
}
}
}
Find every detail of the modern FiveM hud where you will be able to apply code completely programmed by us in a fast and accessible way through simple exports and commands that we have created.
1. Toggle HUD
Also with /toghud command in chat.
exports["jgs-hud"]:showHUD()
exports["jgs-hud"]:hideHUD()
2. Seatbelt
Available through the seatbelt command or in the key (default) “B”.
3. Notifications
exports["jgs-hud"]:AddNotify(text, type, title, icon, boxColor, titleColor)
TriggerEvent('jgs:notification', text, type, title, icon, boxColor, titleColor)
4. Progressbar
Type: ‘bar’ | ‘circle’
Timeouts: in milliseconds
Cb: Function to be executed
exports["jgs-hud"]:addProgress(type, text, timeouts, cb)
5. Help Notify
exports["jgs-hud"]:CreateHelp(key, text)
exports["jgs-hud"]:ShowHelp(key, text)
exports["jgs-hud"]:RemoveHelp(id)
Example of Usage
--@Notifications Events
TriggerEvent('jgs:notification', 'Testing command')
TriggerEvent('jgs:notification', 'Searching keys', 'info')
---@Example Thread
CreateThread(function()
while(true)do
local w = 1000
local playerCoords = GetEntityCoords(PlayerPedId())
local coords = vec3(255,100,100)
local distance = #(playerCoords - coords)
if (distance < 5) then
--[[
---@param text string
---@param key string
ESX.ShowHelpNotification(
text,
key
)
]]
--[[
---@param key string
---@param text string
exports['jgs-hud']:ShowHelp(
key,
text
)
]]
-- ESX.ShowHelpNotification('Hello World', 'E')
-- exports['jgs-hud']:ShowHelp('E', 'Hello World')
w = 0
end
Wait(w)
end
end)
---@Example Command
RegisterCommand('testNotify',
function(playerId, args)
--[[
---@param message string
---@param type string 'error' | 'success' | 'info' | ...Config.Notify.Types
---@param title? string 'Notification'
---@param icon? string 'fa-solid fa-exclamation-triangle'
---@param boxColor? string 'rgb(255, 255, 255)'
---@param titleColor? string 'rgb(0,0,0)'
ESX.ShowNotification(
messsage,
type,
title,
icon,
boxColor,
titleColor
)
]]
--[[
---@param message string
---@param type string 'error' | 'success' | 'info' | ...Config.Notify.Types
---@param title? string 'Notification'
---@param icon? string 'fa-solid fa-exclamation-triangle'
---@param boxColor? string 'rgb(255, 255, 255)'
---@param titleColor? string 'rgb(0,0,0)'
exports['jgs-hud']:AddNotify(
messsage,
type,
title,
icon,
boxColor,
titleColor
)
]]
ESX.ShowNotification(
'This is a testing notification',
'info',
)
exports['jgs-hud']:AddNotify(
'This is an other testing notification',
'info',
)
end, false
)
--@Custom Notify Example #2
ESX.ShowNotification(
'This is a test notification',
'your-custom-type-name',
'Hola',
'fa-thin fa-badge-check',
'rgba(40, 167, 69, 0.3)',
'#28a745'
)
Complete Documentation
All the necessary information to install, configure, and customize the resource is available in our official documentation. It includes practical examples, a FAQ, and detailed guides.
Click here
Support and Community
Our team is available to resolve any questions or issues. We provide frequent updates to ensure the resource’s compatibility with new FiveM versions.
Join us here
Purchase and License
This resource is available exclusively on Tebex. With your purchase, you’ll receive:
- Immediate access to the resource.
- Regular updates.
- Dedicated technical support.
Purchase here
(Compliant with CFX PLA regulations and protected by Asset Escrow.)
| Code is accessible | No |
| Subscription-based | No |
| Lines (approximately) | 500 |
| Requirements | pma-voice, ox_lib, esx/qbcore |
| Support | Yes |
