> For the complete documentation index, see [llms.txt](https://dirkscripts.gitbook.io/dirkscripts-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dirkscripts.gitbook.io/dirkscripts-documentation/resources/dirk-cfx-react.md).

# 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](https://github.com/DirkDigglerz/dirk_docs/blob/main/resources/dirk-lib/modules/scriptConfig/README.md) 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    |