Interface, language, and preview

The tattoo interface loads from the generated files in ui/dist/. The package includes that build and the vanilla thumbnails in ui/public/ImagenesVanilla/; do not assume it includes the React source code or development files for ui/.

Edit delivered files

For small customizations, you can edit the files that come with the resource:

Colors and typography: open ui/dist/assets/index-*.css and change the values of the --tat-* and --cxg-* variables. Keep the current CSS filename because the NUI page already points to that file. This CSS is compiled and may change in a new build; keep a copy of your changes.
Logo: replace ui/dist/assets/cxg-logo-CmIGK6Fh.png, keeping the exact name and path because they are part of the reference in the generated JavaScript. Use an aspect ratio and transparency that fit the display area.
Vanilla thumbnails: replace the file with the same name in ui/dist/ImagenesVanilla/ to see the change in the running version. Also replace the corresponding copy in ui/public/ImagenesVanilla/ if you have it, since a new build copies files from that folder to dist/.

Back up files before editing the build and check the changes in FiveM. For extensive design changes, new components, or React translations, request the UI source and generate a new build; those source files are not part of the distribution described here.

Customize the appearance

For extensive layout, component, or React text changes, use the UI source if it was delivered separately. The main entry points are:

ui/src/index.css: global --tat-* variables for colors, typography, sizes, and shadows.
ui/src/studio-theme.css: --cxg-* variables and studio presentation.
ui/src/components/: React components and component-specific styles.
ui/src/main.tsx: Outfit Variable and Geist Mono Variable imports.

Start by modifying the theme variables. Direct changes to component rules must preserve their focus, error, loading, and disabled states. Change the font in main.tsx if you also want to use a different font; the styles that consume it are defined in the typography variables.

Thumbnails and images

The included vanilla thumbnails are in ui/public/ImagenesVanilla/ and are copied into the production build. Keep the names and paths expected by the catalog. Images supplied by external packs stay in those resources; they are not copied into the UI automatically.

FiveM loads ui/dist/index.html and its files from ui/dist/ to display the NUI. The ui/dist/ directory is generated output; if you received the source code, modify the source and rebuild instead of manually editing minified build files.

Language

Config.Locale and Config.LocaleFallback in config.lua set the default language for Lua messages and the NUI for all players. The value takes effect after restarting cxg-tattoos; it is not an individual option or an NUI selector. Supported codes are en, es, pt-BR, fr, de, it, pl, ru, tr, th, and ar.

React-specific labels have dictionaries in ui/src/i18n.tsx, if that source was delivered. English is the base and covers keys without a translation; Arabic enables RTL reading direction. Changing Config.Locale selects an available language, while changing the dictionaries adjusts the translations included in the UI. These are separate settings.

Build the UI source

These steps apply only if you received the ui/ source folder with package.json and package-lock.json. Node.js and npm are required. Run these commands from ui/:

Code

npm ci
npm run lint
npm run build

npm run lint checks the TypeScript types and npm run build generates ui/dist/, which is what FiveM consumes. Distribute the updated build with the resource.

Camera and preview outfit

config.lua lets you adjust the camera and the outfit applied while the studio is open: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls, and Config.PreviewOutfit. For details about these settings, see Configuration.