Skip to Content
UI PackExports

Exports

This section is aimed at developers. Basic scripting knowledge will help you get the most out of it.

Already using ox_lib? Don’t rewrite every lib.* call. Use the Integration bridge instead. An optional last argument on most calls is the template number, omit it to use configuration defaults.

Notify

notify (client)

exports['crm-uipack']:notify({
    crm_type = 'phone',
    crm_title = 'Phone',
    crm_msg = 'Incoming call from 555-0123',
    crm_duration = 3000,
    crm_position = 'top-right',
    crm_icon = 'fa-solid fa-phone',
}, 1)
KeyDescription
crm_typeKey from crm_config.crm_notify.crm_types (primary, success, error, phone, bank, job, …)
crm_titleOptional. Falls back to the type preset
crm_msgBody text
crm_durationMilliseconds
crm_positionNotify slot
crm_iconFont Awesome class
crm_idOptional. Replaces an existing notify with the same id
crm_colorOptional RGB triple, e.g. '72, 149, 239'
crm_show_durationShow the duration bar

notify (server)

Same table, with the player source first:

exports['crm-uipack']:notify(source, {
    crm_type = 'bank',
    crm_msg = '$2,500 deposited.',
})

defaultNotify

Same as notify. Kept for scripts that used ox_lib’s defaultNotify.

Text UI

showTextUI

exports['crm-uipack']:showTextUI('[E] Enter House', {
    crm_icon = 'house',
    crm_position = 'right',
}, 1)

The first argument can also be a table: { crm_key = 'E', crm_text = 'Enter House', crm_icon = 'house', crm_position = 'right' }.

hideTextUI / isTextUIOpen

exports['crm-uipack']:hideTextUI()
local crm_open = exports['crm-uipack']:isTextUIOpen()

Progress

progressBar and progressCircle share the same UI.

local crm_ok = exports['crm-uipack']:progressBar({
    crm_title = 'Preparing item',
    crm_desc = 'Hold still',
    crm_duration = 3000,
    crm_can_cancel = true,
    crm_icon = 'fa-solid fa-burger',
}, 1)
exports['crm-uipack']:cancelProgress()
local crm_active = exports['crm-uipack']:progressActive()

Skill check

local crm_ok = exports['crm-uipack']:skillCheck(
    { 'easy', 'medium', { crm_areasize = 25, crm_speed = 1.75 } },
    { 'e', 'a', 's' },
    1
)

Presets: easy, medium, hard. Custom steps use crm_areasize and crm_speed. The current step fails if the key is not pressed before crm_config.crm_skillcheck.crm_duration.

exports['crm-uipack']:cancelSkillCheck()
local crm_active = exports['crm-uipack']:skillCheckActive()

Alert

local crm_result = exports['crm-uipack']:alertDialog({
    crm_title = 'Confirm Order',
    crm_msg = 'Do you want to confirm this transaction?',
    crm_icon = 'fa-solid fa-house',
    crm_cancel = true,
    crm_labels = {
        crm_confirm = 'Confirm',
        crm_cancel = 'Cancel',
    },
}, 1)
 
exports['crm-uipack']:closeAlertDialog()

crm_result is 'confirm' or 'cancel'.

Input

local crm_result = exports['crm-uipack']:inputDialog({
    crm_title = 'Input Dialog',
    crm_fields = {
        { crm_type = 'input', crm_label = 'Name', crm_required = true, crm_icon = 'user', crm_placeholder = 'Your name' },
        { crm_type = 'number', crm_label = 'Amount', crm_min = 0, crm_max = 100, crm_default = 12 },
        { crm_type = 'checkbox', crm_label = 'Remember me' },
        { crm_type = 'select', crm_label = 'Choice', crm_options = {
            { value = 'a', label = 'Option A' },
            { value = 'b', label = 'Option B' },
        }, crm_default = 'a' },
    },
    crm_allow_cancel = true,
    crm_position = 'mid',
}, 1)
 
exports['crm-uipack']:closeInputDialog()

Field crm_type values include input, textarea, number, checkbox, slider, select, multi-select, color, date, date-range, time.

Context

exports['crm-uipack']:registerContext({
    crm_id = 'house-menu',
    crm_title = 'House',
    crm_template = 2,
    crm_position = 'right',
    crm_options = {
        {
            crm_title = 'Enter',
            crm_desc = 'Walk inside',
            crm_icon = 'door-open',
            onSelect = function()
                -- your code
            end,
        },
        { crm_title = 'Garage', crm_icon = 'warehouse', crm_menu = 'house-garage', crm_arrow = true },
        { crm_title = 'Locked', crm_icon = 'ban', crm_disabled = true },
    },
})
 
exports['crm-uipack']:showContext('house-menu')
exports['crm-uipack']:hideContext()
local crm_open = exports['crm-uipack']:getOpenContextMenu()

Set close = false on an option to keep the menu open after onSelect. Nested menus use crm_menu (the child id) and menu / crm_menu on the child pointing back to the parent.

Keyboard menu

No mouse cursor. Navigate with arrows, Enter and Escape.

exports['crm-uipack']:registerMenu({
    crm_id = 'vehicle-menu',
    crm_title = 'Vehicle',
    crm_position = 'top-right',
    crm_options = {
        { crm_label = 'Engine', crm_icon = 'gears', crm_checked = true, crm_close = false },
        { crm_label = 'Colour', crm_icon = 'palette', crm_values = { 'Red', 'Green', 'Blue' }, crm_default = 1, crm_close = false },
        { crm_label = 'Fuel', crm_progress = 65, crm_desc = 'Current fuel' },
    },
    onCheck = function(crm_i, crm_checked)
        -- checkbox toggled
    end,
}, function(crm_i, crm_scroll)
    -- item selected
end)
 
exports['crm-uipack']:showMenu('vehicle-menu')
exports['crm-uipack']:hideMenu()
exports['crm-uipack']:setMenuOptions('vehicle-menu', crm_options)
local crm_open = exports['crm-uipack']:getOpenMenu()
Integration