Components

All components are exported from dirk-cfx-react and use Mantine + Framer Motion internally. They follow a dark-theme, VH-based sizing convention.

---

#Admin Components

#AdminPageTitle

Section header for admin panel pages. Renders a Lucide icon with a localized uppercase title.

tsx
import { AdminPageTitle } from "dirk-cfx-react";
import { Fish } from "lucide-react";

<AdminPageTitle title="FishSettings" icon={Fish} color="#4ade80" />

#AsyncSaveButton

Animated save button with idle / pending / success / error states. Shows a spinner while saving, a check on success, and an X on failure.

tsx
import { AsyncSaveButton } from "dirk-cfx-react";

<AsyncSaveButton
  onSave={async () => {
    const result = await updateSettings(changes);
    return result;
  }}
  color="#4ade80"
  label="Save Changes"
/>

---

#Input Components

#InputContainer

Styled wrapper for form fields. Provides a title, description, error display, and consistent dark-theme styling.

tsx
import { InputContainer } from "dirk-cfx-react";

<InputContainer
  title="Fish Name"
  description="The item name used in inventory"
  error={errors?.name}
>
  <TextInput value={name} onChange={...} />
</InputContainer>

#SelectItem

Item selector with image previews. Pulls items from the useItems store (populated by GET_ITEMS NUI callback).

tsx
import { SelectItem } from "dirk-cfx-react";

<SelectItem
  label="RewardItem"
  value={selectedItem}
  onChange={(v) => setValue("reward.item", v)}
  excludeItemNames={["weapon_pistol"]}
/>

#FiveMKeyBindInput

Compound component for configuring FiveM keybinds. Supports keyboard, mouse, gamepad, joystick, and touchpad input mappers.

tsx
import { FiveMKeyBindInput, type FiveMControls } from "dirk-cfx-react";

const [controls, setControls] = useState<FiveMControls>({
  _type: "KEYBOARD",
  _key: "E",
});

<FiveMKeyBindInput value={controls} onChange={setControls}>
  <FiveMKeyBindInput.Category label="Input Type" />
  <FiveMKeyBindInput.Key label="Key" />
</FiveMKeyBindInput>

Sub-components:

---

#Modals

#Modal

General-purpose modal with dark theme, header with icon/badge, close button, and description area.

tsx
import { Modal } from "dirk-cfx-react";

<Modal
  title="Edit Fish"
  icon={Fish}
  iconColor="#4ade80"
  description="Configure this fish species"
  onClose={() => setOpen(false)}
>
  {/* content */}
</Modal>

#ConfirmModal

Destructive action confirmation with optional type-to-confirm.

tsx
import { ConfirmModal } from "dirk-cfx-react";

<ConfirmModal
  title="Delete Fish"
  description="This will permanently remove this fish species."
  confirmLabel="Delete"
  confirmText="bass"
  onConfirm={() => removeFish("bass")}
  onClose={() => setOpen(false)}
/>

---

#Display Components

#LevelBanner / LevelPanel

XP and level display components. Use with createSkill to define your levelling curve.

#Counter

Animated number counter with configurable duration and format.

#BorderedIcon

Icon with a bordered circular background, commonly used in lists.

#FloatingParticles

Decorative animated particle effect for backgrounds.

#InfoBox

Styled information box with icon and text.

#Navigation

Tab-style navigation bar with animated active indicator.

#Title

Styled page title with gradient underline.

#SegmentedControl / SegmentedProgress

Animated segmented controls and progress indicators.