Installation - Revo Scripts

Revo UI Kit requires a manual integration inside ox_lib. Without that step, the UI kit will not load correctly.

Revo UI Kit installs like a normal FiveM resource, but it also needs a required loader snippet added to ox_lib. If you want it to redesign ox_target too, replace the ox_target web index.html file as shown below.

Basic Installation

Add Revo UI Kit to Resources

Drag and drop the revo_uikit folder into your server’s resources directory.

It is recommended to keep it inside a grouped folder such as [revo] for better organization.

Ensure the Resource

Add Revo UI Kit to your server.cfg after ox_lib. If you use ox_target, keep it after Revo UI Kit:

ensure ox_lib
ensure revo_uikit
ensure ox_target

If you do not use ox_target, you only need:

ensure ox_lib
ensure revo_uikit

Required ox_lib Integration

This step is mandatory. Open ox_lib/init.lua and paste the following code at the END OF THE FILE:

local REVO_RESOURCE <const> = 'revo_uikit'

if GetResourceState(REVO_RESOURCE) ~= 'missing' then
    local success, err = pcall(function()
        local code = LoadResourceFile(REVO_RESOURCE, 'init.lua')
        if code then
            local chunk, loadErr = load(code, ('@@%s/init.lua'):format(REVO_RESOURCE))
            if not chunk then error(loadErr) end
            chunk()
        end
    end)

    if not success then
        error(('Failed to load %s. Error: %s'):format(REVO_RESOURCE, err))
    end
end

Do not place this code in the middle of the file. Paste it at the end of ox_lib/init.lua.

Optional ox_target Integration

If you also want Revo UI Kit to redesign ox_target, REPLACE the contents of: ox_target/web/index.html with this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ox_target</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"
    />

    <style>
      html,
      body,
      #root,
      #default-root {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: transparent;
      }

      #default-root[hidden] {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <div id="default-root" hidden>
      <div id="eye">
        <svg
          id="eyeSvg"
          xmlns="http://www.w3.org/2000/svg"
          height="36px"
          viewBox="0 0 24 24"
          width="36px"
          fill="#000000"
        >
          <path d="M0 0h24v24H0V0z" fill="none"></path>
          <path
            d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
          ></path>
        </svg>
      </div>

      <div id="options-wrapper"></div>
    </div>

    <script>
      const REVO_RESOURCE = 'revo_uikit';
      const REVO_BASE = `https://cfx-nui-${REVO_RESOURCE}/web/dist/assets`;
      const REVO_JS = `${REVO_BASE}/index.js`;
      const REVO_CSS = `${REVO_BASE}/index.css`;

      window.__REVO_PENDING_NUI__ = [];
      window.__REVO_OXTARGET_HANDLING__ = false;

      // Buffer ox_target NUI messages until Revo OxTarget mounts and replays them.
      window.addEventListener(
        'message',
        (event) => {
          if (window.__REVO_OXTARGET_HANDLING__) return;
          window.__REVO_PENDING_NUI__.push(event.data);
          event.stopImmediatePropagation();
        },
        true
      );

      window.addEventListener('revo:ox_target_disabled', () => {
        loadDefaultUi();
      });

      function loadDefaultUi() {
        window.__REVO_OXTARGET_HANDLING__ = false;
        window.__REVO_PENDING_NUI__ = [];

        const revoRoot = document.getElementById('root');
        if (revoRoot) revoRoot.replaceChildren();

        const defaultRoot = document.getElementById('default-root');
        defaultRoot.hidden = false;

        if (!document.querySelector('link[data-revo-default-ui="true"]')) {
          const css = document.createElement('link');
          css.rel = 'stylesheet';
          css.href = 'style.css';
          css.dataset.revoDefaultUi = 'true';
          document.head.appendChild(css);
        }

        if (!document.querySelector('script[data-revo-default-ui="true"]')) {
          const script = document.createElement('script');
          script.type = 'module';
          script.src = 'js/main.js';
          script.dataset.revoDefaultUi = 'true';
          document.body.appendChild(script);
        }
      }

      async function isRevoTargetEnabled() {
        try {
          const response = await fetch(`https://${REVO_RESOURCE}/getConfig`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json; charset=UTF-8' },
            body: JSON.stringify({}),
          });

          if (!response.ok) return true;

          const config = await response.json();
          return config?.enabledComponents?.ox_target !== false;
        } catch {
          return true;
        }
      }

      async function loadRevoUi() {
        try {
          const enabled = await isRevoTargetEnabled();
          if (!enabled) throw new Error('revo_uikit ox_target integration disabled in config');

          const probe = await fetch(REVO_JS, { method: 'GET' });
          if (!probe.ok) throw new Error('revo_uikit main bundle not found');

          const css = document.createElement('link');
          css.rel = 'stylesheet';
          css.href = REVO_CSS;
          document.head.appendChild(css);

          await import(REVO_JS);
        } catch (err) {
          console.warn('revo_uikit unavailable, falling back to default ox_target UI', err);
          loadDefaultUi();
        }
      }

      loadRevoUi();
    </script>
  </body>
</html>

This file makes ox_target load Revo UI Kit when it is available, and fall back to the default ox_target UI if it is not.

Restart Order

After installation, restart your resources so the integration is applied:

refresh
restart ox_lib
restart revo_uikit
restart ox_target

If you do not use ox_target, restart only:

refresh
restart ox_lib
restart revo_uikit

Verification

After installation, check the following:

ox_lib starts without loader errors
Revo UI Kit loads with your configured style
ox_lib interfaces such as notifications or menus use the new design
If ox_target integration is enabled, target UI also uses the Revo UI Kit design
If revo_uikit is stopped, ox_target falls back correctly if you installed the optional integration

​Basic Installation

​Required ox_lib Integration

​Optional ox_target Integration

​Restart Order

​Verification

Basic Installation

Required ox_lib Integration

Optional ox_target Integration

Restart Order

Verification