> 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/getting-started.md).

# Getting Started

## Installation

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

```bash
pnpm add dirk-cfx-react
```

### Wrap Your App

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

```tsx
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:

```ts
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:

```bash
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:

```tsx
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:

```tsx
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";
```