⚛️Dirk CFX React
A shared React component and utility library for building FiveM/RedM NUI interfaces. Provides the admin panel, form system, settings integration, theming, and reusable UI components used across all Di
Last updated
A shared React component and utility library for building FiveM/RedM NUI interfaces. Provides the admin panel, form system, settings integration, theming, and reusable UI components used across all Di
dirk-cfx-react is the shared front-end foundation for all DirkScripts NUI panels. It provides everything needed to build admin interfaces, settings panels, and in-game UIs without duplicating code across resources.
Settings Panel — Full admin UI with sidebar nav, undo/redo, save/discard, change history, JSON editor, and reset to defaults.
Form System — Deep nested form state management with undo/redo history, async validation, dirty tracking, and Zod schema support.
Script Config Integration — Zustand-based store factory that connects to dirk_lib's scriptConfig module via NUI callbacks.
Theme System — Pre-configured Mantine dark theme with VH-based sizing, global input styles, and custom colour palettes.
20+ Components — Modals, keybind inputs, item selectors, level panels, animated buttons, and more.
NUI Utilities — fetchNui, useNuiEvent, locale system, item image helpers.
DirkProvider — Drop-in root provider that handles theme setup, settings fetch, font loading, and error boundaries.
Admin UI
SettingsPanel, AdminPageTitle, AsyncSaveButton
Forms
useForm, useFormField, useFormFields, useFormActions, useFormError, FormProvider
Settings
createScriptConfig, getScriptConfigInstance
Inputs
InputContainer, SelectItem, FiveMKeyBindInput
Modals
Modal, ConfirmModal, PromptModal, ModalStore
Layout
BorderedIcon, Counter, FloatingParticles, InfoBox, Navigation, Title
Levels
LevelBanner, LevelPanel, createSkill
Motion
MotionFlex, SegmentedControl, SegmentedProgress
Hooks
useNuiEvent, useAudio, useTornEdges
Utils
fetchNui, locale, colorWithAlpha, useSettings, useItems
Providers
DirkProvider
dirk-cfx-react expects these to be installed in your consuming project:
react
>= 19.2.0
@mantine/core
>= 8.3.9
framer-motion
>= 12.23.24
zustand
>= 5.0.3
Last updated