Getting Started

How to install and start using dirk-cfx-react in a FiveM resource

Installation

Install dirk-cfx-react in your resource's web/ folder:

pnpm add dirk-cfx-react

Wrap Your App

In your resource's root React component, wrap everything in DirkProvider:

import { DirkProvider } from "dirk-cfx-react";
import { AdminPanel } from "./components/Admin/main";

function App() {
  return (
    <DirkProvider>
      <AdminPanel />
    </DirkProvider>
  );
}

DirkProvider handles:

• Mantine theme setup with dark mode and VH-based sizing

• Fetching server settings (currency, colours, item image path, game type)

• Font loading (Akrobat family)

• Error boundary wrapping

• NUI ready signal (NUI_READY callback)

---

Build Setup

Your resource's web/ folder should use Vite as the build tool. A typical Vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  base: "./",
  build: {
    outDir: "build",
    emptyOutDir: true,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Build command:

cd web
pnpm run build

The output goes to web/build/ which is served by FiveM's NUI system.

---

Importing

Everything is exported from the top-level package:

import {
  SettingsPanel,
  AdminPageTitle,
  AsyncSaveButton,
  InputContainer,
  SelectItem,
  FiveMKeyBindInput,
  Modal,
  ConfirmModal,
  useNuiEvent,
  fetchNui,
  locale,
  useForm,
  useFormField,
  useFormActions,
  FormProvider,
  createScriptSettings,
  DirkProvider,
} from "dirk-cfx-react";

You can also import from sub-paths if you prefer:

import { SettingsPanel } from "dirk-cfx-react/components";
import { useForm } from "dirk-cfx-react/hooks";
import { fetchNui } from "dirk-cfx-react/utils";
import { DirkProvider } from "dirk-cfx-react/providers";