FiveM NUI — React + Vite

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