# Koja HUD

Koja HUD is a free, open-source HUD for FiveM, written in Lua and React.
It replaces the GTA status display with player status bars, a speedometer, notifications, a progress bar, a text prompt and a vehicle control menu — and every player can restyle and rearrange it from an in-game settings menu.

This section covers version **1.1.0** of the resource `koja-hud`.

## What you get

| Area | What is in it |
| --- | --- |
| Player status | Health, armour, hunger, thirst, stamina, oxygen, voice and stress, in 5 styles |
| Speedometer | 5 styles with gear, fuel (petrol or electric), nitro, seatbelt, engine, RPM, engine health, lights, indicators and cruise control |
| Messages | Notifications (3 styles), progress bar, text UI prompt, killfeed, status effects, low health and low fuel warnings |
| Information | Compass, weapon and ammo panel, cash, bank, job, server ID, clock, Discord link and logo, key hints, server watermark with a PVP mode |
| Minimap | A square minimap that players move and resize in-game |
| Vehicle | Engine, seatbelt, cruise control, nitro saved per owned vehicle, and a menu for doors, hood, trunk, lights and turn signals |
| Settings menu | `/settings` — styles, colours, visibility, a drag-and-drop layout editor and custom key binds, saved per player |
| Languages | English, Polski, Deutsch, Español, Français, Hindi |

## Quick facts

- **Resource name:** `koja-hud` — use it in `ensure` and in every `exports['koja-hud']` call.
- **Frameworks:** ESX, QBCore, QBox and ox_core, detected by [koja-lib](https://github.com/Koja-Scripts/koja-lib).
- **Requires:** `koja-lib` and `oxmysql`. `pma-voice` is optional and drives the voice bar.
- **Fuel:** read through koja-lib — `ox_fuel`, `LegacyFuel`, or the native fuel level.
- **Database:** one `nitro` column, added to your owned-vehicles table on start. No tables of its own.
- **Licence:** free and open source. The compiled UI ships in `web/build`; the React source is in `web/src`.

## Start here

:::steps

### Install it

[Installation](/free/hud/installation) — dependencies, `server.cfg` order and the one setting you must change.

### Configure it

[Configuration](/free/hud/configuration) — every option in `editable/shared/config.lua`.

### Set the player defaults

[Player settings](/free/hud/player-settings) — `js.json`: what new players see, key hints, Discord and logo, and the settings menu itself.

### Learn what it does

[Features](/free/hud/features) — every component, and what players can change.

### Use it from your own code

[Exports & Events](/free/hud/exports-and-events) — notifications, progress bars, text UI, status effects, killfeed, stress, nitro and visibility.

### Know what it stores

[Database](/free/hud/database) — the `nitro` column and nothing else.

:::

## In this section

::::cards{cols="2"}
:::card{title="Installation" href="/free/hud/installation" icon="download"}
Dependencies, start order and the owned-vehicles table.
:::
:::card{title="Configuration" href="/free/hud/configuration" icon="settings"}
Every option in config.lua, explained.
:::
:::card{title="Player settings" href="/free/hud/player-settings" icon="sliders"}
Defaults, key hints, Discord, logo and the settings menu layout from js.json.
:::
:::card{title="Features" href="/free/hud/features" icon="sparkles"}
Status, speedometer, notifications, minimap, vehicle menu and more.
:::
:::card{title="Exports & Events" href="/free/hud/exports-and-events" icon="terminal"}
The client API for other resources.
:::
:::card{title="Translations" href="/free/hud/translations" icon="language"}
Switch the language or add your own.
:::
:::card{title="UI development" href="/free/hud/ui-development" icon="code"}
Build the React UI, and the NUI messages it listens to.
:::
:::card{title="Database" href="/free/hud/database" icon="database"}
The nitro column on your owned-vehicles table.
:::
:::card{title="Troubleshooting" href="/free/hud/troubleshooting" icon="bug"}
Fixes for the problems people actually hit.
:::
::::

:::hint{type="info" title="Need help?"}
Ask on the Discord server: [discord.gg/hexelstore](https://discord.gg/hexelstore).
:::