How to integrate custom clothing with QBCore, Qbox and ESX

Add custom clothing to FiveM on QBCore, Qbox and ESX: which clothing menu to use, the start order, how to test it, and how saved outfits behave.

Tutorial

9 min read

Updated

Clothing

Custom clothing works the same way on every FiveM framework: the addon pack streams from its own resource, and the game counts its items with the vanilla ones. What changes between QBCore, Qbox and ESX is the clothing menu that lists those items, the order things start in, and how a player's outfit is saved. This guide shows how to integrate custom clothing for GTA on each of the three, with the code for every step.

How custom clothing plugs into a FiveM framework

Custom clothing plugs into a FiveM framework in three layers. The addon pack streams from its own resource, the clothing menu lists its items after the vanilla ones, and the framework saves the outfit. The pack works on every framework; only the menu, the start order and the saved outfit change.

The pack
Streams its files from its own resource. The framework never touches it, so the same pack works on every framework.
The clothing menu
Asks the game how many items each body part has, and lists them. Your items come after the vanilla ones, so they show up by themselves.
The saved outfit
The framework stores what each player wears, in its own database format. This is where QBCore, Qbox and ESX differ most.

If you don't have a pack yet, read how addon packs are built in How to add custom clothing to your FiveM server, or make one in the Alive Studio, as shown at the end of this guide. The FiveM custom clothing page has more on what you can make.

QBCore vs Qbox vs ESX: clothing menus at a glance

QBCore uses qb-clothing, Qbox runs QB menus through its bridge layer, and ESX uses esx_skin with skinchanger, while illenium-appearance is a common alternative on all three. Each framework needs different base resources, so the table shows each clothing menu and what it needs at a glance.

FrameworkClothing menuAnother common choiceNeeds
QBCoreqb-clothingillenium-appearanceqb-core, plus ox_lib for illenium-appearance
QboxQB menus, through its bridge layerillenium-appearanceoxmysql, ox_lib, ox_inventory
ESXesx_skin with skinchangerillenium-appearancees_extended

illenium-appearance (opens in a new tab) is a standalone clothing and appearance menu that supports QBCore and ESX, and needs ox_lib (opens in a new tab). It adds clothing stores, saved outfits and the /pedmenu and /reloadskin commands.

How to add custom clothing to QBCore

To add custom clothing to QBCore, install one clothing menu, then start your pack after it in server.cfg. QBCore's default menu is qb-clothing (opens in a new tab), which reads the item counts from the game, so your addon items appear after the vanilla ones. It also comes with clothing stores, barbers, job locker rooms and saveable outfits.

Install qb-clothing, or switch to illenium-appearance. Use only one: remove the other before you start.

qb-clothing
# qb-clothing: put the resource in your [qb] folder, then import its SQL file# (qb-clothing.sql) into your database.

How to add custom clothing to Qbox

To add custom clothing to Qbox, start its dependencies first, then your clothing menu, then the pack. Qbox is the successor to QBCore with a bridge layer, so a QB clothing menu runs on it, and the same game native counts your addon items.

Qbox (opens in a new tab) is the successor to QBCore. Its core has a bridge layer that keeps most QB resources working, so a QB clothing menu runs on it. The core depends on oxmysql, ox_lib and ox_inventory, and illenium-appearance's release notes include Qbox fixes, which makes it a common pick.

Follow the Qbox installation guide (opens in a new tab) for the full list. The clothing menu and your pack come after the core.

server.cfg
ensure oxmysqlensure ox_libensure ox_inventoryensure qbx_coreensure illenium-appearance   # or the clothing menu you useensure mypack                # your addon pack, after the clothing menu

How to add custom clothing to ESX

To add custom clothing to ESX, run esx_skin with skinchanger, start your pack after the skin resources, then read each component's maximum to see your addon items arrive. In ESX, torso_1 is a top's drawable and torso_2 is its texture.

ESX's menu is esx_skin (opens in a new tab), built on skinchanger (opens in a new tab), and shops come from esx_clotheshop (opens in a new tab). skinchanger can tell you the maximum of every component, so you can see your addon items arrive, and it sets clothes by key. In ESX, torso_1 is a top's drawable and torso_2 is its texture.

Follow the ESX install tutorial (opens in a new tab) for your version, then add the pack last.

server.cfg
ensure es_extendedensure skinchangerensure esx_skinensure esx_clotheshopensure mypack    # your addon pack, after the skin resources

Saved outfits and pack load order

Every framework saves what a player wears by item number, and an addon item's number depends on where its pack sits in the load order. Add a pack in the middle, or remove one, and the numbers after it move, so saved outfits can change.

server.cfg
ensure pack_basics   # first, and stays firstensure pack_summer   # new packs go at the endensure pack_winter

Clothing shops, prices and who can wear what

Each framework sets up clothing shops in its own config. ESX uses esx_clotheshop, which takes a price and a list of what players can change, qb-clothing sets shops, barbers and locker rooms in its config.lua, and illenium-appearance can limit clothing by job, gang, player or permission.

Each framework sets up shops in its own config. In ESX, esx_clotheshop takes a price and a list of what players can change. illenium-appearance can limit clothing by job, gang, player or permission, which is how a server gates VIP clothing it sells through Tebex (opens in a new tab). qb-clothing's shops, barbers and locker rooms are set in its config.lua.

esx_clotheshop
-- esx_clotheshop config.luaConfig.Price = 250            -- the price of the clothesConfig.ChargePerPiece = false -- charge the price per piece changedConfig.DrawDistance = 10.0    -- how far away the marker showsConfig.SkinProps = {          -- what a player can change here  "tshirt", "torso", "decals", "arms", "pants", "shoes",  "bags", "chain", "helmet", "glasses", "watches",}

Custom clothing not showing in QBCore, Qbox or ESX: fixes

When custom clothing doesn't show in QBCore, Qbox or ESX, check the clothing menu's own config first, then the start order, and make sure only one menu runs. If saved outfits change after you add a pack, look at the load order. The fixes are below.