fivem-react-nui

name

fivem-react-nui

description

Builds NUI interfaces for FiveM using React 18 + TypeScript + Vite + Tailwind CSS v3 + Zustand. Use when the user mentions NUI, interface, UI, menu, HUD, panel, overlay, React, Vite, Tailwind, or any in-game interface for FiveM — regardless of the backend framework (vRP, QBCore, Qbox, ESX). Covers project structure, FiveM CEF restrictions, observe/Post hooks, VisibilityProvider, animations, dynamic config/theme, and performance rules.

FiveM NUI — React + Vite

Language rule: Internal reasoning is in compact English. All messages and output displayed to the user must be in the user's language.

Stack: React 18 + TypeScript + Vite + Tailwind CSS v3.4.17 + Zustand

Fundamental Rules

• base: "./" in vite.config.ts — MANDATORY for assets to load in FiveM
• Use rem for ALL sizes — NEVER px for layout (scales with player resolution)
• Tailwind v4 uses OKLCH, which FiveM CEF does not support — use Tailwind v3.4.17
• FORBIDDEN: backdrop-filter: blur(), filter: blur(), filter: drop-shadow() — cause FPS drop
• FORBIDDEN: framer-motion, GSAP, react-spring — use pure CSS transitions/keyframes
• Global overflow: hidden and user-select: none
• Independent modules (Notify, Progress, HUD) outside VisibilityProvider
• Main interface (panels, crafts, dialogs) inside VisibilityProvider with SetNuiFocus
• isEnvBrowser() for data mocking in dev
• Communication: observe() to listen to NUI messages, Post.create() to send callbacks