# 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/`:

```powershell
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](https://docs.cxgstudios.com/docs/en/01-cxg-tattoos/03-configuracion.md).