DirkScripts
Docs
⚛️ Dirk CFX React
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.
#What's Included
- 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.
#Key Features
| Category | Exports |
|---|---|
| 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 |
#Peer Dependencies
dirk-cfx-react expects these to be installed in your consuming project:
| Package | Version |
|---|---|
react | >= 19.2.0 |
@mantine/core | >= 8.3.9 |
framer-motion | >= 12.23.24 |
zustand | >= 5.0.3 |