nss_libs - UI Components

This directory contains the NUI components for nss_libs. NUI

Simple: ES6 Module Import

Import any component directly via ES6 module import:

import {NssAudio} from "nui://nss_libs/ui/NssAudio/NssAudio.js";

Load Components via NssUiApi

Load multiple components at once using NssUiApi. This ensures all components and their styles are ready before use.

import {NssUiApi} from "nui://nss_libs/ui/NssUiApi.js";

const nss_ui_api = new NssUiApi('your_resource_name'); 

const component_names = [
    NssUiApi.NssResponsive,
    NssUiApi.NssSvgReplacer,
    NssUiApi.NssTextBox
];

nss_ui_api.load(component_names).then((components) => { 
    new components.NssResponsive();
    new components.NssSvgReplacer();

    // Components are ready to use
});

Local Development (without RedM)

For developers who want to test NUI locally in Chrome without a running RedM server:

1. Create a wrapper file nss_ui_api.js in your HTML script root:

nss_ui_api.js

const is_cfx_browser = navigator.userAgent.indexOf("CitizenFX") > -1;

let imp_obj;

if (is_cfx_browser) {
    imp_obj = await import("nui://nss_libs/ui/NssUiApi.js");
} else {
    // Adapt relative path to your project structure
    imp_obj = await import("../../../../../[nss]/nss_libs/ui/NssUiApi.js");
}

const NssUiApi = imp_obj.NssUiApi;

export {NssUiApi};

app.js

import {NssUiApi} from "./nss_ui_api.js";

const nss_ui_api = new NssUiApi('your_resource_name');

nss_ui_api.load([NssUiApi.NssResponsive]).then((components) => {
    new components.NssResponsive();
    // Ready
});

Available Components

Component	Description
NssAudio	Audio player for sound effects with built-in SFX library.
NssButtons	Styled buttons with colors, sizes, glow effects, and click callbacks.
NssClient	NUI ↔ Lua client communication bridge via XHR.
NssConfirm	Promise-based confirm and alert dialogs.
NssHelper	Static utility functions (debounce, animation, cloning).
NssLoadingIndicator	Animated loading spinner overlay.
NssModal	Animated full-screen modal with customizable content.
NssPadLock	Interactive combination lock PIN entry UI.
NssResponsive	Responsive scaling system based on screen width.
NssSimpleTextEditor	Section-based rich text editor with validation.
NssSvgReplacer	Replaces <img> SVGs with inline SVG for CSS styling.
NssTextBox	Styled text display with decorative frame.
NssTip	Toast/notification with configurable position and duration.