Modern UI (s4_ui) – One clean interface layer for your entire server

Every notification, dialog, menu and progress bar on your server – one look, one API, zero dependencies.

Drop it in and every script speaks the same visual language. No React runtime. No database. No framework lock-in. And if you already run ox_lib, s4_ui can render its entire interface for you – without touching ox_lib or a single script calling it.

ensure s4_ui
ensure ox_lib

Why s4_ui?

• 12 components, one export API – notify, menus, dialogs, skill check, radial & more
• ox_lib takeover – instant reskin of your whole server, no edits required
• Fully themeable & repositionable – nothing is hardcoded
• Markdown everywhere – bold, code, links & lists inside notifications and menus
• Player UI editor (/editui) – players theme their own HUD, saved per player
• 0.00ms idle – no per-frame polling, no database, standalone

Components

Everything is themeable and repositionable – nothing is hardcoded.

ox_lib takeover – reskin your whole server in two lines

Ensure s4_ui above ox_lib and every lib.notify, lib.progressBar, lib.showContext, lib.inputDialog, lib.skillCheck and the rest renders as s4_ui – no edits to ox_lib and no edits to the scripts calling it.

ensure s4_ui
ensure ox_lib

Everything else in ox_lib – callbacks, zones, points, locales, cache, math and table helpers – is untouched and keeps working. Font Awesome icon names are auto-translated to their Boxicons equivalent, so existing scripts keep their icons. Each module can be handed back to ox_lib individually in the config.

Markdown & per-call styling

Text fields render markdown – bold, italics, inline code, links, lists, headings and line breaks – in notifications, Text UI, dialogs and menus.

exports.s4_ui:notify({
    title   = 'Sale complete',
    message = 'Sold **Sultan RS** for `$45,000`.',
})

notify, textUI and alert also take a style table to restyle a single call without touching CSS – camelCase properties, bare numbers as pixels, nested selectors supported:

exports.s4_ui:notify({
    title   = 'Custom',
    message = 'One-off look.',
    style   = {
        backgroundColor  = '#141517',
        color            = '#f8f9fa',
        borderRadius     = 14,
        ['.description'] = { color = '#909296' },
    },
})

Developer API

-- Blocking exports return their value directly - no callback wiring
local answer = exports.s4_ui:alert({ title = 'Confirm', message = 'Are you sure?' })
local ok     = exports.s4_ui:skillCheck({ difficulty = 'medium', key = 'e' })
local values = exports.s4_ui:input({ title = 'Details', fields = { ... } })

• Per-item onSelect / onChange callbacks on menus and radials
• ox_lib-compatible field names – most snippets port over unchanged
• Client and server events for cross-resource triggering
• The Text UI window belongs to the resource that opened it, so another script’s cleanup loop can’t close your prompt

Player UI editor

Built-in /editui command. Players drag, resize and theme every element on a snapping grid, and the layout is saved per player using FiveM KVP on their own machine. No database, nothing server-side.

Performance

There is no per-frame polling loop in the UI layer. The single shared cache thread replaces the while true / Wait(500) loops other resources would each run themselves.

Preview ( Takeover used )

🔔 Notifications

⭕ Circular progress

🎯 Skill check

⚠️ Alert dialog

⌨️ Input dialog

📋 Context menu

📃 List menu

🎛️ Radial menu

🖐️ Player UI editor

Configuration

One file – config/shared.lua:

• Theme colours and dark/light presets
• Corner radius, UI scale, animation speed
• Fonts and optional UI sound hooks
• Component defaults (position, duration, difficulty)
• Radial keybind and editor command
• ox_lib takeover – on/off globally or per module
• Text UI ownership behaviour

Installation

1. Drop s4_ui into your resources/ folder
2. Add ensure s4_ui to server.cfg, before any resource that uses it
3. Start the server – you should see:

[s4_ui] loaded - Modern UI by S4Development

Using the ox_lib takeover? s4_ui must be ensured above ox_lib.

Links

Download	s4development
Documentation	Docs
Video	YouTube