ox_lib: a common UI toolbox

So far you have built things the long way so you could see how they work. Now it is time to use the toolbox most modern FiveM servers reach for. ox_lib gives you ready-made pop-ups, menus, dialogs, and progress bars so you can focus on script logic instead of rebuilding UI every time. It is a community library from the Overextended team, not an official Cfx.re resource, but it is so widely used that knowing it is part of the job.

You'll learn: lib.notify -> lib.registerContext / lib.showContext -> lib.inputDialog -> lib.progressCircle -> where the ox_lib docs live
Time: ~25 minutes
Prereqs: Module 04 complete. ox_lib installed and started before any qu_* resource.
Outcome: One client file that shows a notification, opens a menu, asks for input, and runs a progress bar.

BEFORE YOU START

Build it

Confirm ox_lib is installed and started

The lib global will exist when your resource loads.

Your resource borrows the lib global from ox_lib, so ox_lib has to be running before your resource starts. In server.cfg, ox_lib must be ensured above your lesson resource:

code

ensure ox_lib
ensure qu_ox_lib_notifications_ui

If you do not have ox_lib yet, download the latest release from the CommunityOx GitHub (github.com/CommunityOx/ox_lib/releases) and drop the ox_lib folder into resources. Do not rename it: the @ox_lib/init.lua path in the next step depends on the folder being called exactly ox_lib.

Make the resource folder

The server has one folder for this lesson.

Inside your server's resources folder, create this folder:

code

resources/qu_ox_lib_notifications_ui

Create the files

Every file named in the manifest exists.

Create this exact file layout:

code

resources/qu_ox_lib_notifications_ui/
fxmanifest.lua
client.lua

Write fxmanifest.lua

FiveM knows which files to load, and in what order.

Open fxmanifest.lua and paste this:

code

fx_version 'cerulean'
game 'gta5'

shared_script '@ox_lib/init.lua'
client_script 'client.lua'

dependencies {
'ox_lib'
}

Older guides write the dependency as dependency 'ox_lib' (singular). That form is still tolerated, but the documented modern form is the plural table dependencies { 'ox_lib' }, so that is what you use here.

Write the lesson code

The topic is now represented by runnable code.

Open client.lua and paste this:

code

lib.registerContext({
id = 'qu_ox_lib_notifications_ui_menu',
title = 'qu_ox_lib_notifications_ui',
options = {
    { title = 'Ask name', event = 'qu_ox_lib_notifications_ui:ask' }
}
})

RegisterCommand('oxdemo', function()
lib.notify({
    title = 'qu_ox_lib_notifications_ui',
    description = 'Notification works',
    type = 'success'
})

lib.showContext('qu_ox_lib_notifications_ui_menu')
end, false)

AddEventHandler('qu_ox_lib_notifications_ui:ask', function()
local input = lib.inputDialog('Save a name', { 'Name' })
if not input then return end

lib.progressCircle({ duration = 1000, label = 'Saving' })

print('[qu_ox_lib_notifications_ui] saved ' .. input[1])
end)

Start and test it

The expected proof appears in the correct console.

With the two ensure lines from Step 1 already in server.cfg, save the file, then run:

code

restart qu_ox_lib_notifications_ui

Join the server, then type this in the chat box (press T):

code

/oxdemo

A green notification appears, a menu opens with one option, choosing it asks for a name, a progress circle runs for one second, and then the line below prints to your F8 client console. Type Mike when the dialog asks.

Keep reading the full lesson

Still ahead in this lesson

How it works
If something went wrong
What you can do now
Try it yourself