CrazeUI

CrazeUI is a powerful, standalone menu framework that provides developers with an easy-to-use interface for creating interactive menus. Built with clean code and comprehensive documentation, it's the perfect solution for any FiveM script requiring user interaction.

---

Overview

CrazeUI offers a complete menu system with GTA V authentic styling, multiple item types, and seamless framework integration. Whether you're building police scripts, job systems, or admin panels - CrazeUI provides the foundation you need.

Key Features

• GTA V Authentic Design - Professional interface matching native GTA experience

• Multiple Item Types - Buttons, checkboxes, sliders, input fields, sub-menus

• Framework Independent - ESX, QBCore, and standalone compatible

• Easy Integration - Simple export functions and event system

• Full Customization - Complete source code access

• Optimized Performance - Minimal resource usage

---

Quick Start

Installation

1. Download CrazeUI from your purchase

2. Extract to your resources folder

3. Add to server.cfg:

ensure CrazeUI

1. Restart your server

2. Test with /crazeui command

Basic Usage

-- Open a simple menu
RegisterCommand('mymenu', function()
    local menu = {
        title = "My Menu",
        subtitle = "Choose an option",
        items = {
            {
                id = "option1",
                type = "button",
                label = "Option 1",
                description = "First option",
                icon = "star"
            }
        }
    }
    exports['CrazeUI']:OpenMenu(menu)
end)

---

Controls

Key	Function
↑ ↓	Navigate through items
Enter / →	Select item or open sub-menu
← / Backspace	Go back or close menu
← →	Adjust slider values

---

Item Types

Button

Execute actions or trigger events.

{
    id = "my_button",
    type = "button",
    label = "Click Me",
    description = "This is a button",
    icon = "star"
}

Checkbox

Toggle on/off states.

{
    id = "my_toggle",
    type = "checkbox",
    label = "Enable Feature",
    description = "Toggle this feature",
    icon = "check",
    checked = false
}

Slider

Adjust numeric values.

{
    id = "my_slider",
    type = "slider",
    label = "Volume",
    description = "Adjust volume",
    icon = "volume-up",
    value = 50,
    min = 0,
    max = 100,
    step = 5
}

Input Field

Collect user input (text or numbers).

{
    id = "my_input",
    type = "button",
    label = "Enter Name",
    description = "Type your name",
    icon = "keyboard",
    inputType = "text",
    inputTitle = "Enter Name",
    inputDescription = "Please enter your name:",
    inputPlaceholder = "John Doe"
}

Sub-Menu

Create nested menu structures.

{
    id = "my_submenu",
    type = "submenu",
    label = "More Options",
    description = "Open submenu",
    icon = "folder"
}

---

Export Functions

OpenMenu(data)

Opens a menu with the specified configuration.

Parameters:

• data (table) - Menu configuration object

Example:

exports['CrazeUI']:OpenMenu({
    title = "Menu Title",
    subtitle = "Menu Subtitle",
    items = { ... }
})

---

CloseMenu()

Closes the currently open menu.

Example:

exports['CrazeUI']:CloseMenu()

---

UpdateMenuData(data)

Updates the current menu without closing it.

Parameters:

• data (table) - Updated menu data

Example:

exports['CrazeUI']:UpdateMenuData({
    items = { ... }
})

---

Events

crazeui:buttonClicked

Triggered when a button or sub-menu item is clicked.

Data:

• id (string) - Item identifier

• type (string) - Item type

• label (string) - Item label

• data (table) - Custom data attached to item

Example:

RegisterNetEvent('crazeui:buttonClicked')
AddEventHandler('crazeui:buttonClicked', function(data)
    print("Clicked: " .. data.id)
end)

---

crazeui:checkboxToggle

Triggered when a checkbox is toggled.

Data:

• id (string) - Checkbox identifier

• checked (boolean) - New state (true/false)

Example:

RegisterNetEvent('crazeui:checkboxToggle')
AddEventHandler('crazeui:checkboxToggle', function(data)
    print(data.id .. " is now: " .. tostring(data.checked))
end)

---

crazeui:sliderChange

Triggered when a slider value changes.

Data:

• id (string) - Slider identifier

• value (number) - Current value

Example:

RegisterNetEvent('crazeui:sliderChange')
AddEventHandler('crazeui:sliderChange', function(data)
    print(data.id .. " value: " .. data.value)
end)

---

crazeui:inputSubmit

Triggered when user submits input.

Data:

• id (string) - Input identifier

• value (string) - Entered value

Example:

RegisterNetEvent('crazeui:inputSubmit')
AddEventHandler('crazeui:inputSubmit', function(data)
    print("Input: " .. data.value)
end)

---

Integration Examples

Police Menu

function OpenPoliceMenu()
    local menu = {
        title = "POLICE MENU",
        subtitle = "Law Enforcement",
        items = {
            {
                id = "search_player",
                type = "button",
                label = "Search Player",
                description = "Search nearby player",
                icon = "search"
            },
            {
                id = "handcuff",
                type = "button",
                label = "Handcuff",
                description = "Cuff/Uncuff player",
                icon = "handcuffs"
            },
            {
                id = "fine_player",
                type = "button",
                label = "Give Fine",
                description = "Issue a fine",
                icon = "dollar-sign",
                inputType = "number",
                inputTitle = "Fine Amount",
                inputDescription = "Enter amount:",
                inputPlaceholder = "500"
            }
        }
    }
    exports['CrazeUI']:OpenMenu(menu)
end

RegisterCommand('policemenu', OpenPoliceMenu)

---

Garage System

function OpenGarage()
    ESX.TriggerServerCallback('garage:getVehicles', function(vehicles)
        local items = {}
        
        for i, vehicle in ipairs(vehicles) do
            table.insert(items, {
                id = "spawn_" .. vehicle.plate,
                type = "button",
                label = vehicle.model:upper(),
                description = "Plate: " .. vehicle.plate,
                icon = "car",
                data = vehicle
            })
        end
        
        exports['CrazeUI']:OpenMenu({
            title = "GARAGE",
            subtitle = "Your Vehicles",
            items = items
        })
    end)
end

---

Settings Menu

function OpenSettings()
    local menu = {
        title = "SETTINGS",
        subtitle = "Preferences",
        items = {
            {
                id = "ui_sounds",
                type = "checkbox",
                label = "UI Sounds",
                description = "Enable menu sounds",
                icon = "volume-up",
                checked = true
            },
            {
                id = "ui_opacity",
                type = "slider",
                label = "UI Opacity",
                description = "Menu transparency",
                icon = "adjust",
                value = 100,
                min = 50,
                max = 100,
                step = 5
            }
        }
    }
    exports['CrazeUI']:OpenMenu(menu)
end

---

Customization

Changing Colors

Edit html/style.css to customize the menu appearance:

.menu-item.selected {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(245, 245, 250, 0.95) 100%);
}

Adjusting Position

Change menu position in html/style.css:

.menu-wrapper {
    top: 10px;    /* Distance from top */
    left: 10px;   /* Distance from left */
}

Custom Sounds

Replace sound files in html/sounds/ folder:

• nav.ogg - Navigation sound

• select.ogg - Selection sound

• back.ogg - Back sound