> For the complete documentation index, see [llms.txt](https://swampys.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swampys.gitbook.io/docs/resources/sinterface/installation.md).

# Installation

Install and start sInterface on your FiveM server.

{% stepper %}
{% step %}

#### Download and organize the files :

* Go to [Cfx.re Portal](https://portal.cfx.re/).
* Authenticate with your login details.
* In your [Granted Assets](https://portal.cfx.re/assets/granted-assets), you’ll find sInterface.
* Download the script files via Cfx.re Portal.
* Drag\&Drop the `sInterface` folder into your `resources` folder.
  {% endstep %}

{% step %}

#### Configuration Features :

The **sInterface** script provides flexibility for configuring the UI and the drop-in bridge. Below are the key features you can adjust:

* **Editable files:**
  * ```lua
        'sInterface/config.lua',
        'sInterface/client/bridge/*.lua',
        'sInterface/data/theme.json'
    ```
* **Locale:**
  * Set `Config.Locale` to `'fr'` or `'en'` (can also be changed in-game from the Studio).
* **Bridge (drop-in UI):**
  * Enable or disable the whole bridge with `Config.Bridge.Enabled`.
  * Toggle each framework independently: `ESX`, `ox_lib`, `QBCore`, `Qbox`.
  * ox\_lib stays started (zones, callbacks, cache). Only the UI is redirected.
* **Modules:**
  * Enable / disable live UI modules from `Config.Modules` (`notify`, `menu`, `textui`, `progress`, `alert`, `input`, `context`, `radial`, `skillcheck`).
* **Notifications:**
  * Position, duration, max visible, layout (`simple` | `icon` | `banner` | `image` | `advanced` | `entreprise`).
  * Focus key (default Tab) for clickable / sticky notifications.
* **TextUI / Progress / Alert / Input / SkillCheck / Radial / Context / Menu:**
  * Positions, styles, keys, currency, targeting and menu previews — all from `config.lua`.
* **Studio:**
  * In-game theme editor (`/sistudio`). Optional ACE via `Config.Studio.Ace`.
    {% endstep %}

{% step %}

#### Add Script to Server Configuration

* **Edit server.cfg**
  * Open the `server.cfg` file located in the root directory of your FiveM server.
* **Add the Following Lines** To ensure the script loads correctly, add the following lines to your `server.cfg`:

  ```lua
  ensure ox_lib
  ensure es_extended
  ensure sInterface
  ```
* **Note:** Start `sInterface` **after** your framework (`es_extended`, `qb-core` or `qbx_core`) and `ox_lib`.
  {% endstep %}

{% step %}

#### Remove the old ESX UI resources

sInterface **replaces** the ESX UI resources. Do **not** start them anymore:

* Remove (or comment) these lines from `server.cfg`:

  ```lua
  # ensure esx_notify
  # ensure esx_progressbar
  # ensure esx_textui
  # ensure esx_context
  ```
* You can also delete the `esx_notify`, `esx_progressbar`, `esx_textui` and `esx_context` folders. sInterface **provides** those resource names, so existing scripts keep working (`exports.esx_notify:Notify`, `ESX.ShowNotification`, etc.).
* **ox\_lib:** leave `ox_lib` started. Zones, callbacks and cache stay native. Only interface calls (`lib.notify`, `lib.progressBar`, `lib.showTextUI`, …) are redirected when sInterface is started.
* **QBCore / Qbox:** events such as `QBCore:Notify` and `qbx_core:client:notify` are captured by the bridge.

{% hint style="warning" %}
If `esx_notify` / `esx_progressbar` / `esx_textui` / `esx_context` stay started, you can get duplicate UIs. Stop them.
{% endhint %}

{% hint style="info" %}
Do not remove `ox_lib` from your server. sInterface does not replace ox\_lib — it only takes over the UI.
{% endhint %}
{% endstep %}

{% step %}

#### Restart

* Restart your server (or `ensure sInterface` after a `refresh`).
* Open the Studio with `/sistudio` to check the theme.
* If `Config.Debug = true`, you can run `/sitest` to preview every module.
  {% endstep %}
  {% endstepper %}