feat(esx_garage): modernize NUI with React + TypeScript#86
Merged
Kr3mu merged 2 commits intoesx-framework:new-garagesfrom Oct 20, 2025
Merged
feat(esx_garage): modernize NUI with React + TypeScript#86Kr3mu merged 2 commits intoesx-framework:new-garagesfrom
Kr3mu merged 2 commits intoesx-framework:new-garagesfrom
Conversation
- Replace Vue 3 UI with React 19 + TypeScript + Zustand - Implement ESX design guidelines (Roboto font, #FB9B04 brand) - Add NUI callback structure for kr3mu integration - Remove backdrop-filter for FiveM CEF compatibility - Use ESX standard shadows, border-radius, transitions
- Use root font-size approach for automatic rem scaling - Remove deprecated react-query v3, keep @tanstack/react-query v5 - Scale Framer Motion animation offset for perfect centering - All components use clean rem values without calc() Technical implementation: - ScaleProvider sets document.documentElement.fontSize - All rem values scale automatically with viewport -Animation offsets multiply by scale factor - Industry-standard approach for maintainability"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Complete modernization of the garage NUI from Vue 3 to React 19 with TypeScript. Implements ESX design guidelines including Roboto font, #FB9B04 brand color, standardized border-radius (8px/12px/16px), and cubic-bezier transitions. The UI is fully functional with Zustand
state management, pre-built dist files, and a Lua client skeleton ready for backend integration.
Motivation
The existing Vue 3 implementation needed to be replaced with a modern, type-safe React solution that fully complies with ESX design standards. This change provides better maintainability, type safety through TypeScript, and ensures visual consistency with other ESX addons.
Implementation Details
Usage Example