Migration from ox_lib

Migrate from ox_lib UI components to Modern UI with zero code changes required.

Our latest update includes automatic ox_lib compatibility, allowing you to switch to Modern UI without modifying any existing code in your resources.

Quick Migration

Add the compatibility script

Add '@lation_ui/init.lua' to the shared_scripts section of your resource’s fxmanifest.lua:

shared_scripts {
    -- ...existing scripts...
    '@lation_ui/init.lua'
}

Restart your resource

Restart your resource (or server) to load the compatibility layer:

stop your-resource-name
refresh
ensure your-resource-name

That’s it!

All ox_lib UI function calls are now automatically redirected to Modern UI. No code changes needed!

What Gets Converted

The compatibility layer automatically converts these ox_lib functions:

ox_lib Function	→	Modern UI Equivalent
`lib.alertDialog()`	→	`exports.lation_ui:alert()`
`lib.inputDialog()`	→	`exports.lation_ui:input()`
`lib.registerContext()` `lib.showContext()` `lib.hideContext()` `lib.getOpenContextMenu()`	→	`exports.lation_ui:registerMenu()` `exports.lation_ui:showMenu()` `exports.lation_ui:hideMenu()` `exports.lation_ui:getOpenMenu()`
`lib.notify()`	→	`exports.lation_ui:notify()`
`lib.progressBar()` `lib.progressCircle()` `lib.progressActive()` `lib.cancelProgress()`	→	`exports.lation_ui:progressBar()` `exports.lation_ui:progressBar()` `exports.lation_ui:progressActive()` `exports.lation_ui:cancelProgress()`
`lib.skillCheck()` `lib.cancelSkillCheck()` `lib.skillCheckActive()`	→	`exports.lation_ui:skillCheck()` `exports.lation_ui:cancelSkillCheck()` `exports.lation_ui:skillCheckActive()`
`lib.showTextUI()` `lib.hideTextUI()` `lib.isTextUIOpen()`	→	`exports.lation_ui:showText()` `exports.lation_ui:hideText()` `exports.lation_ui:isOpen()`

⚠️

Note: While most ox_lib features are supported, some advanced or less common options may not have direct equivalents. Test thoroughly after migration.

Manual Migration (Optional)

If you prefer to manually update your code to take advantage of Modern UI’s enhanced features:

Before (ox_lib)

lib.alertDialog({
    header = 'Header',
    content = 'A message with some words and things'
})

After (Modern UI)

exports.lation_ui:alert({
    header = 'Header',
    content = 'A message but with optional icons, color & types',
    icon = 'fas fa-trash',
    iconColor = '#EF4444',
    type = 'destructive',
})

Tip: Once migrated, explore the individual component pages to discover enhanced features and customization options available in Modern UI.

A very special & big thank you to @KostaZ from Peak Scripts for creating this compatibility layer!

Install Instructions Alert Dialog