# 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    |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dirkscripts.gitbook.io/dirkscripts-documentation/resources/dirk-cfx-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.