UI Kit Remake

Table of Contents

1. Introduction
2. Installation
3. Configuration
4. Components
   • Notifications
   • Progress Bar
   • Skill Check
   • Input Dialog
   • Action Dialog
   • Context Menu
   • List Menu
   • Radial Menu
   • Text UI
5. UI Settings
6. Examples
7. API Reference

---

Introduction

ATY UI Kit v2 is a comprehensive, modern UI framework for FiveM servers. It provides a complete set of customizable UI components with a sleek, professional design.

Features

• 🎨 Fully Customizable - Drag & drop positioning, color customization, and multiple style variants
• 📱 Responsive Design - Works perfectly on all screen resolutions
• 🎯 Easy to Use - Simple exports with intuitive API
• 🔧 Highly Configurable - Extensive configuration options
• 💾 Persistent Settings - User preferences saved in local storage
• 🎭 Multiple Themes - Regular and Simple variants for most components

---

Installation

1. Download the resource and place it in your resources folder
2. Add ensure aty_uikitv2 to your server.cfg
3. Restart your server

Dependencies

• No additional dependencies required

---

Configuration

The main configuration file is located at config.lua.

Basic Configuration

Config = {
    RadialKey = "F4"            -- Key to open radial menu
}

Radial Menu Items

Configure job-specific and general radial menu items in Config.MenuItems and Config.JobInteractions.

Text UI Menus

Define text UI menus with coordinates in Config.TextUIMenus:

Config.TextUIMenus = {
    {
        id = "example_menu",
        coords = vector3(x, y, z),
        drawDistance = 6.5,
        showDistance = 2.0,
        options = {
            {
                title = "Action Name",
                icon = "fa-solid fa-icon",
                event = "eventName",
                type = "client"
            }
        }
    }
}

---

Components

Notifications

Display notifications to players with various types and customizable appearance.

Types

• info - Information (default)
• success - Success messages
• error - Error messages
• warning - Warning messages

Styles

• Regular - Full-featured with background gradient and icon border
• Simple - Minimalist design without background gradient

Usage

exports["aty_uikitv2"]:AddNotify({
    title = "Notification Title",
    message = "Your message here",
    icon = "fa-solid fa-bell",
    duration = 5000,
    type = "info"
})

Parameters

Parameter	Type	Required	Description
title	string	Yes	Notification title
message	string	Yes	Notification message
icon	string	No	Font Awesome icon class
duration	number	No	Duration in milliseconds (default: 5000)
type	string	No	Notification type (info, success, error, warning)

Example

-- Success notification
exports["aty_uikitv2"]:AddNotify({
    title = "Purchase Complete",
    message = "You have successfully purchased a vehicle!",
    icon = "fa-solid fa-check-circle",
    duration = 5000,
    type = "success"
})

-- Error notification
exports["aty_uikitv2"]:AddNotify({
    title = "Error",
    message = "You don't have enough money!",
    icon = "fa-solid fa-exclamation-triangle",
    duration = 5000,
    type = "error"
})

---

Progress Bar

Display a progress bar for actions that take time to complete.

Styles

• Regular - Full-featured with background gradient and icon
• Simple - Minimalist design

Usage

exports["aty_uikitv2"]:StartProgress({
    name = "unique_name",
    duration = 10000,
    label = "Progress Title",
    message = "Progress description",
    icon = "fa-solid fa-spinner",
    useWhileDead = false,
    canCancel = true,
    controlDisables = {
        disableMovement = true,
        disableCarMovement = true,
        disableMouse = false,
        disableCombat = true
    },
    anim = {
        dict = "amb@world_human_stand_mobile@male@text@enter",
        name = "enter",
        flag = 49
    },
    prop = {
        model = "prop_phone_ing",
        bone = 28422,
        pos = { x = 0.0, y = 0.0, z = 0.0 },
        rot = { x = 0.0, y = 0.0, z = 0.0 }
    }
}, function(success)
    if success then
        -- Progress completed
    else
        -- Progress cancelled
    end
end)

Parameters

Parameter	Type	Required	Description
name	string	Yes	Unique identifier
duration	number	Yes	Duration in milliseconds
label	string	Yes	Progress bar title
message	string	Yes	Progress bar description
icon	string	No	Font Awesome icon class
useWhileDead	boolean	No	Allow while dead (default: false)
canCancel	boolean	No	Allow cancellation (default: true)
controlDisables	table	No	Control disable options
anim	table	No	Animation dictionary and name
prop	table	No	Prop to attach during progress

---

Skill Check

Interactive skill check mini-game for player actions.

Usage

local result = exports["aty_uikitv2"]:StartSkillCheck({
    title = "Skill Check",
    subtitle = "Press the correct key when the bar is in the target zone",
    difficulty = 0.6,  -- 0.0 - 1.0 (easier - harder)
    speed = 1.2        -- Speed multiplier
})

if result then
    -- Skill check passed
else
    -- Skill check failed
end

Parameters

Parameter	Type	Required	Description
title	string	No	Skill check title
subtitle	string	No	Skill check subtitle/instructions
difficulty	number	No	Difficulty (0.0-1.0, default: 0.5)
speed	number	No	Speed multiplier (default: 1.5)

---

Input Dialog

Collect user input with various field types.

Supported Field Types

• input - Text input
• number - Number input with increment/decrement buttons
• checkbox - Checkbox
• select - Dropdown select
• multi-select - Multiple selection dropdown
• slider - Range slider
• color - Color picker
• date - Date picker
• date-range - Date range picker
• time - Time picker
• textarea - Multi-line text input

Usage

local result = exports["aty_uikitv2"]:InputDialog("Dialog Title", {
    {
        type = "input",
        name = "username",
        label = "Username",
        description = "Enter your username",
        placeholder = "Username...",
        icon = "fa-solid fa-user",
        required = true,
        min = 3,
        max = 20
    },
    {
        type = "number",
        name = "age",
        label = "Age",
        icon = "fa-solid fa-chart-column",
        required = true,
        default = 18,
        min = 0,
        max = 120,
        step = 1
    },
    {
        type = "checkbox",
        name = "terms",
        label = "I accept the terms and conditions",
        checked = false,
        required = true
    },
    {
        type = "select",
        name = "country",
        label = "Country",
        placeholder = "Select country",
        icon = "fa-solid fa-flag",
        searchable = true,
        clearable = true,
        options = {
            { value = "us", label = "United States" },
            { value = "uk", label = "United Kingdom" }
        }
    }
}, "Please fill out the form", function(data)
    if data then
        print(json.encode(data, { indent = true }))
    end
end)

Common Field Parameters

Parameter	Type	Required	Description
type	string	Yes	Field type
name	string	Yes	Field name (key in result)
label	string	Yes	Field label
description	string	No	Field description
placeholder	string	No	Placeholder text
icon	string	No	Font Awesome icon
required	boolean	No	Is field required
disabled	boolean	No	Is field disabled
default	any	No	Default value

---

Action Dialog

Display an action confirmation dialog with optional countdown.

Usage

local result = exports["aty_uikitv2"]:ShowAction({
    header = "Confirm Action",
    content = "Are you sure you want to proceed?",
    cancel = true,
    size = "sm",
    duration = 5000,  -- Optional countdown timer
    labels = {
        confirm = "Yes",
        cancel = "No"
    }
})

if result == 'confirm' then
    -- User confirmed
elseif result == 'cancel' then
    -- User cancelled
end

Parameters

Parameter	Type	Required	Description
header	string	Yes	Dialog title
content	string	Yes	Dialog content (supports markdown)
cancel	boolean	No	Show cancel button (default: true)
size	string	No	Dialog size (xs, sm, md, lg, xl)
duration	number	No	Auto-cancel duration in ms
labels	table	No	Custom button labels

Markdown Support

The content supports basic markdown:

• **text** - Bold
• *text* - Italic
• \n - Line break

---

Context Menu

Display a context menu with various button types and metadata.

Button Types

• Standard - Simple button with optional description
• Progress - Button with progress bar
• Arrow - Submenu navigation button

Usage

exports["aty_uikitv2"]:RegisterContextMenu({
    id = "test_menu",
    title = "Test Context Menu",
    menu = "default",
    canClose = true,
    oxExit = function()
        exports["aty_uikitv2"]:AddNotify({
            title = "Context Menu",
            message = "You have closed the context menu.",
            icon = "fa-solid fa-times-circle",
            duration = 5000,
            type = "info",
        })
    end,
    options = {
        {
            title = 'Empty Button',
            disabled = false,
            onSelect = function(args, data)
                print(json.encode(args, { indent = true }), json.encode(data, { indent = true }))
            end
        },
        {
            title = 'Button with Progress',
            icon = 'fa-solid fa-flag',
            progress = 49,
            colorScheme = 'teal',
            onSelect = function(args, data)
                print(json.encode(args, { indent = true }), json.encode(data, { indent = true }))
            end
        },
        {
            title = 'Disabled Button',
            disabled = true
        },
        {
            title = 'Example Button',
            description = 'Lorem ipsum dolor sit amet consectetur',
            icon = 'fa-solid fa-flag',
            event = 'exampleClientEvent',
            args = { exampleArg = 'exampleValue' },
            metadata = {
                ['Value 1'] = 'Some value',
                ['Value 2'] = '999'
            },
            onSelect = function(args, data)
            exports["aty_uikitv2"]:AddNotify({
                title = "exampleArg: " .. args.exampleArg,
                message = "Value 1: " .. data.metadata["Value 1"] .. " Value 2: " .. data.metadata["Value 2"],
                icon = "fa-solid fa-flag",
                duration = 4000,
                type = "info",
            })
            end
        },
            {
                title = 'Check Stats',
                description = 'Lorem ipsum dolor sit amet consectetur',
                icon = 'fa-solid fa-flag',
                arrow = true,
                menu = {
                    title = 'Stats',
                    description = 'Choose a stat to view details.',
                    options = {
                        {
                            title = 'Health',
                            description = 'View your current health.',
                            icon = 'fa-solid fa-heart',
                            event = 'stat_health',
                            args = {}
                        },
                        {
                            title = 'Armor',
                            description = 'View your current armor.',
                            icon = 'fa-solid fa-shield-halved',
                            event = 'stat_armor',
                            args = {}
                        },
                        {
                            title = 'Speed',
                            description = 'View your current speed.',
                            icon = 'fa-solid fa-gauge-high',
                            event = 'stat_speed',
                            args = {}
                        }
                    }
                },
                metadata = {
                    HP = '100',
                    Armor = '50',
                    Speed = '75'
                }
            },
        {
            title = 'Event Button',
            description = 'Lorem ipsum dolor sit amet consectetur',
            icon = 'fa-solid fa-flag',
            arrow = true,
            event = 'someClientEvent',
            args = { action = 'open' }
        }
    }
})

Option Parameters

Parameter	Type	Required	Description
title	string	Yes	Button title
description	string	No	Button description
icon	string	No	Font Awesome icon
disabled	boolean	No	Disable button
progress	number	No	Progress percentage (0-100)
colorScheme	string	No	Color scheme for progress
arrow	boolean	No	Show arrow (for submenus)
menu	string	No	Submenu ID to navigate to
event	string	No	Event to trigger
args	table	No	Event arguments
metadata	table	No	Metadata to display
onSelect	function	No	Callback function

---

List Menu

Display a scrollable list menu with various option types.

Option Types

• Simple - Standard selectable option
• Checkbox - Option with checkbox
• Scroll - Option with side-scrollable values

Usage

exports["aty_uikitv2"]:RegisterListMenu({
    id = 'settings_menu',
    title = 'Settings',
    description = 'Configure your settings',
    footer = 'Use arrow keys to navigate',
    canClose = true,
    onSelected = function(selected, secondary, args)
        print("Selected:", selected)
    end,
    onSideScroll = function(selected, scrollIndex, args)
        print("Scrolled to:", scrollIndex)
    end,
    onCheck = function(selected, checked, args)
        print("Checkbox:", checked)
    end,
    onClose = function(keyPressed)
        print("Menu closed")
    end,
    options = {
        {
            label = 'Simple Option',
            description = 'A simple selectable option'
        },
        {
            label = 'Checkbox Option',
            checked = true
        },
        {
            label = 'Scroll Option',
            icon = 'fa-solid fa-sliders',
            values = {'Low', 'Medium', 'High'},
            defaultIndex = 1
        },
        {
            label = 'Option with Args',
            args = { id = 'my_option' }
        }
    }
})

-- Show list menu
exports["aty_uikitv2"]:ShowListMenu('settings_menu')

Menu Parameters

Parameter	Type	Required	Description
id	string	Yes	Unique menu ID
title	string	Yes	Menu title
description	string	No	Menu description
footer	string	No	Footer text
canClose	boolean	No	Allow closing (default: true)
onSelected	function	No	Selection callback
onSideScroll	function	No	Scroll callback
onCheck	function	No	Checkbox callback
onClose	function	No	Close callback
options	table	Yes	List of options

Option Parameters

Parameter	Type	Required	Description
label	string	Yes	Option label
description	string	No	Option description
icon	string	No	Font Awesome icon
checked	boolean	No	Checkbox state
values	table	No	Scrollable values
defaultIndex	number	No	Default scroll index
args	table	No	Custom arguments

---

Radial Menu

Circular radial menu for quick access to common actions.

Usage

-- Add radial menu items
exports["aty_uikitv2"]:AddRadialMenuItem({
    {
        id = "action1",
        label = "Action 1",
        icon = "fa-solid fa-star",
        onSelect = function()
            -- Handle action
        end
    },
    {
        id = "submenu",
        label = "More Actions",
        icon = "fa-solid fa-folder",
        items = {
            {
                id = "subaction1",
                label = "Sub Action 1",
                icon = "fa-solid fa-circle",
                onSelect = function()
                    -- Handle sub action
                end
            }
        }
    }
})

Item Parameters

Parameter	Type	Required	Description
id	string	Yes	Unique item ID
label	string	Yes	Item label
icon	string	Yes	Font Awesome icon
items	table	No	Submenu items
onSelect	function	No	Selection callback

Built-in Features

The radial menu automatically includes:

• Vehicle controls (doors, trunk, hood, lights, extras)
• Job-specific actions
• Citizen actions

Configure these in Config.MenuItems and Config.JobInteractions.

---

Text UI

Display interactive text UI elements at world coordinates.

Usage

Text UI menus are configured in config.lua:

Config.TextUIMenus = {
    {
        id = "atm",
        coords = vector3(147.4, -1035.8, 29.3),
        drawDistance = 10.0,
        showDistance = 2.0,
        options = {
            {
                title = "Open ATM",
                icon = "fa-solid fa-credit-card",
                event = "bank:openATM",
                type = "client"
            },
            {
                title = "Deposit Money",
                icon = "fa-solid fa-arrow-up",
                event = "bank:deposit",
                type = "client"
            }
        }
    }
}

Parameters

Parameter	Type	Required	Description
id	string	Yes	Unique menu ID
coords	vector3	Yes	World coordinates
drawDistance	number	Yes	Distance to start drawing
showDistance	number	Yes	Distance to show options
options	table	Yes	Available options

---

UI Settings

Players can customize the UI using the in-game settings panel.

Opening Settings

RegisterCommand("ui_settings", function()
    SetNuiFocus(true, true)
    SendNUIMessage({
        action = "showSettings"
    })
end)

Customization Options

Components Tab

• Enable/disable individual components
• Enter edit mode to reposition components

Types Tab

• Switch between Regular and Simple notification styles
• Switch between Regular and Simple progress bar styles
• Preview changes in real-time

Colors Tab

• Customize colors for each notification type (info, error, warning, success)
• Customize progress bar colors
• Set background gradients
• Configure icon colors and backgrounds
• Live preview of changes

Edit Mode

In edit mode, users can:

1. Drag & Drop - Click the move button and drag to reposition
2. Scale - Enter scale value (e.g., 1x, 2x, 3x)
3. Reset - Reset to default position and scale

All changes are automatically saved to local storage and persist across sessions.

---

Examples

Complete Progress Example

RegisterCommand("mining", function()
    exports["aty_uikitv2"]:StartProgress({
        name = "mining",
        duration = 15000,
        label = "Mining Ore",
        message = "Breaking rocks...",
        icon = "fa-solid fa-hammer",
        useWhileDead = false,
        canCancel = true,
        controlDisables = {
            disableMovement = true,
            disableCarMovement = true,
            disableMouse = false,
            disableCombat = true
        },
        anim = {
            dict = "melee@large_wpn@streamed_core",
            name = "ground_attack_on_spot",
            flag = 1
        }
    }, function(success)
        if success then
            exports["aty_uikitv2"]:AddNotify({
                title = "Success",
                message = "You mined some ore!",
                icon = "fa-solid fa-gem",
                type = "success"
            })
            -- Give player ore
        else
            exports["aty_uikitv2"]:AddNotify({
                title = "Cancelled",
                message = "Mining cancelled",
                icon = "fa-solid fa-times",
                type = "error"
            })
        end
    end)
end)

Skill Check Chain Example

RegisterCommand("lockpick", function()
    local success1 = exports["aty_uikitv2"]:StartSkillCheck({
        title = "Lockpicking",
        subtitle = "Stage 1 of 3",
        difficulty = 0.4,
        speed = 1.0
    })
    
    if success1 then
        local success2 = exports["aty_uikitv2"]:StartSkillCheck({
            title = "Lockpicking",
            subtitle = "Stage 2 of 3",
            difficulty = 0.6,
            speed = 1.3
        })
        
        if success2 then
            local success3 = exports["aty_uikitv2"]:StartSkillCheck({
                title = "Lockpicking",
                subtitle = "Stage 3 of 3",
                difficulty = 0.8,
                speed = 1.6
            })
            
            if success3 then
                exports["aty_uikitv2"]:AddNotify({
                    title = "Success",
                    message = "Lock picked successfully!",
                    type = "success"
                })
                -- Unlock door/vehicle
            else
                exports["aty_uikitv2"]:AddNotify({
                    title = "Failed",
                    message = "Lockpick broke!",
                    type = "error"
                })
            end
        end
    end
end)

Complex Input Form Example

RegisterCommand("character_create", function()
    local result = exports["aty_uikitv2"]:InputDialog("Create Character", {
        {
            type = "input",
            name = "firstname",
            label = "First Name",
            placeholder = "John",
            icon = "fa-solid fa-user",
            required = true,
            min = 2,
            max = 50
        },
        {
            type = "input",
            name = "lastname",
            label = "Last Name",
            placeholder = "Doe",
            icon = "fa-solid fa-user",
            required = true,
            min = 2,
            max = 50
        },
        {
            type = "date",
            name = "birthdate",
            label = "Date of Birth",
            icon = "fa-solid fa-calendar",
            required = true,
            format = "DD/MM/YYYY",
            min = "01/01/1950",
            max = "31/12/2005"
        },
        {
            type = "select",
            name = "gender",
            label = "Gender",
            icon = "fa-solid fa-venus-mars",
            required = true,
            options = {
                { value = "m", label = "Male" },
                { value = "f", label = "Female" }
            }
        },
        {
            type = "number",
            name = "height",
            label = "Height (cm)",
            icon = "fa-solid fa-ruler-vertical",
            required = true,
            min = 140,
            max = 220,
            step = 1,
            default = 180
        },
        {
            type = "textarea",
            name = "backstory",
            label = "Backstory",
            placeholder = "Tell us about your character...",
            icon = "fa-solid fa-book",
            min = 2,
            max = 10,
            maxLength = 500
        }
    }, "Fill out your character information", function(data)
        if data then
            -- Create character with data
            print(json.encode(data, { indent = true }))
        end
    end)
end)

Dynamic Context Menu Example

-- Register shop menu
exports["aty_uikitv2"]:RegisterContextMenu({
    id = "weapon_shop",
    title = "Weapon Shop",
    canClose = true,
    options = {
        {
            title = 'Pistol',
            description = 'A basic handgun',
            icon = 'fa-solid fa-gun',
            metadata = {
                ['Price'] = '$500',
                ['Ammo'] = '12 rounds'
            },
            onSelect = function(args, data)
                -- Handle purchase
            end
        },
        {
            title = 'Shotgun',
            description = 'Powerful close-range weapon',
            icon = 'fa-solid fa-crosshairs',
            metadata = {
                ['Price'] = '$1200',
                ['Ammo'] = '8 shells'
            },
            onSelect = function(args, data)
                -- Handle purchase
            end
        }
    }
})

-- Open shop when player enters marker
CreateThread(function()
    while true do
        local sleep = 1000
        local playerCoords = GetEntityCoords(PlayerPedId())
        local shopCoords = vector3(20.0, -1106.0, 29.0)
        local distance = #(playerCoords - shopCoords)
        
        if distance < 2.0 then
            sleep = 0
            DrawMarker(1, shopCoords.x, shopCoords.y, shopCoords.z - 1.0, 
                      0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 
                      1.0, 1.0, 1.0, 
                      255, 255, 255, 100, false, true, 2, false, nil, nil, false)
            
            if IsControlJustPressed(0, 38) then -- E key
                exports["aty_uikitv2"]:ShowContextMenu("weapon_shop")
            end
        end
        
        Wait(sleep)
    end
end)

---

API Reference

Notifications

exports["aty_uikitv2"]:AddNotify(data)

Progress Bar

exports["aty_uikitv2"]:StartProgress(data, callback)

Skill Check

local result = exports["aty_uikitv2"]:StartSkillCheck(data)

Input Dialog

local result = exports["aty_uikitv2"]:InputDialog(title, inputs, description, callback)

Action Dialog

local result = exports["aty_uikitv2"]:ShowAction(data)

Context Menu

exports["aty_uikitv2"]:RegisterContextMenu(data)
exports["aty_uikitv2"]:ShowContextMenu(menuId)

List Menu

exports["aty_uikitv2"]:RegisterListMenu(data)
exports["aty_uikitv2"]:ShowListMenu(menuId)

Radial Menu

exports["aty_uikitv2"]:AddRadialMenuItem(items)

---

Support

For support, bug reports, or feature requests, please contact the developer.

License

This resource is protected. Unauthorized distribution or modification is prohibited.

---

Made with ❤️ by atiysu