FiveM UI/NUI Design — HUD, Inventory, Loading Screen
We design UI and NUI for FiveM servers that want a look of their own instead of the same interface every other server runs. Every screen is built with HTML, CSS and JavaScript, or Vue when the screen calls for it, with a focus on staying smooth and lightweight so it never drags down a player's frame rate.
Examples of UI/NUI work
- HUD showing player stats (health, hunger, thirst, cash, etc.)
- Inventory screens with drag-and-drop item handling
- In-game menus and context menus
- Loading screens themed to your server
- In-game phone / tablet UI
- Character creator screens
Real UI we built (try it free)
Every screen below was designed and written by the X3D team and is free to use. Put it on a test server and judge the smoothness and weight yourself before we talk.
- X3D Notify — Notification cards in nine positions, with item icons, rarity frames and full Thai support
- X3D Progress Bar — Progress bar with ESC to cancel, a countdown and an automatic hotkey lock
- X3D Loading Screen — Terminal-style loading screen in one HTML file, with an ENTER WORLD button players press before spawning
- X3D Phone — In-game phone: pma-voice calls, SMS with location sharing, mobile banking and a camera with self-hosted photos
- X3D Character Skin — 77-slot character editor with an orbiting camera, poses and lighting
- X3D Main Menu — Server main menu with system cards, announcements, timed events, a city guide and a player settings tab
- X3D Mailbox — Mailbox with Mail and Safe tabs and a redeem-code field right in the panel
Tech and performance
We build NUI with HTML/CSS/JS, or Vue for more complex screens, designed to hold up at the resolutions players actually use. The priority is staying light and smooth — nothing that eats resources it doesn't need and costs players frame rate.
Matched to your brand
Colors, fonts and layout are designed around your server's brand and theme — not a reused, off-the-shelf UI that looks like everyone else's.
How the project runs
1. Tell us what you need
Share reference styles or a theme, plus the features each screen needs.
2. Get a quote
We assess the UI's complexity and timeline before design starts.
3. Design and build
We design the look and write the NUI code, wired to your server/client scripts.
4. Test and deliver
We test on a live server to check real-world smoothness before handing over every file.
What to prepare beforehand
Bring reference themes or colors, the main screen resolution most of your players use, and a list of the server/client scripts this UI needs to talk to. The clearer the references, the closer the first draft lands to what you want.
Revisions and support
The number of revision rounds during design and the support terms after delivery are set out in each project's quote, agreed before design work starts.