> ## Documentation Index
> Fetch the complete documentation index at: https://docs.temacstore.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizando o HUD e a Interface dos Scripts FiveM

> Configure e personalize a interface visual dos scripts FiveM, incluindo posição do HUD, cores, notificações e compatibilidade com sistemas de UI externos.

A maioria dos scripts FiveM inclui elementos de interface como HUD, notificações e menus. Esta página explica como configurar a aparência e o comportamento visual, além de como integrar com sistemas de UI de terceiros que você já usa no servidor.

## Configurações de Interface

As opções de UI ficam no `config.lua` de cada script:

```lua config.lua theme={null}
Config.UI = {
    -- Notificações
    NotificationSystem = 'default', -- 'default', 'okok', 'pNotify', 'ox_lib'
    NotificationPosition = 'top-right',
    NotificationDuration = 5000,    -- Duração em ms

    -- HUD
    ShowHUD = true,
    HUDPosition = 'bottom-left',    -- 'top-left', 'top-right', 'bottom-left', 'bottom-right'

    -- Menus
    MenuSystem = 'default',         -- 'default', 'ox_lib', 'qb-menu'
}
```

## Sistemas de Notificação

Escolha o sistema de notificação compatível com o que você já usa:

<Tabs>
  <Tab title="Padrão">
    O sistema padrão usa notificações nativas do FiveM. Nenhuma dependência adicional:

    ```lua config.lua theme={null}
    Config.UI.NotificationSystem = 'default'
    ```
  </Tab>

  <Tab title="ox_lib">
    Para usar as notificações do `ox_lib` (requer ox\_lib instalado):

    ```lua config.lua theme={null}
    Config.UseOxLib = true
    Config.UI.NotificationSystem = 'ox_lib'
    ```
  </Tab>

  <Tab title="pNotify">
    Para integrar com o pNotify:

    ```lua config.lua theme={null}
    Config.UI.NotificationSystem = 'pNotify'
    ```
  </Tab>

  <Tab title="okok Notify">
    Para usar o okokNotify:

    ```lua config.lua theme={null}
    Config.UI.NotificationSystem = 'okok'
    ```
  </Tab>
</Tabs>

## Posicionamento do HUD

Ajuste a posição dos elementos de HUD para evitar sobreposição com outros recursos:

```lua config.lua theme={null}
Config.UI.HUDPosition = 'bottom-left'
Config.UI.HUDOffset = { x = 20, y = 20 }  -- Offset em pixels a partir da borda
```

<Note>
  Se o HUD se sobrepõe a outro recurso, ajuste o `HUDOffset` ou altere o `HUDPosition`. As posições disponíveis são: `top-left`, `top-right`, `bottom-left` e `bottom-right`.
</Note>

## Desativando Elementos Visuais

Você pode desativar elementos específicos da interface:

```lua config.lua theme={null}
Config.UI = {
    ShowHUD = false,           -- Desativa completamente o HUD
    ShowProgressBar = true,    -- Mantém a barra de progresso
    ShowNotifications = true,  -- Mantém notificações
    ShowMarkers = false,       -- Remove marcadores no mapa
    ShowBlips = true,          -- Mantém blips no mapa
}
```

## Compatibilidade com Frameworks de UI

<Tip>
  Se você usa um pacote de UI completo (como **lj-hud** ou **ps-hud**), desative o HUD nativo do script com `Config.UI.ShowHUD = false` para evitar duplicação de informações na tela.
</Tip>

<CardGroup cols={2}>
  <Card title="Configuração Geral" icon="gear" href="/configuracao">
    Veja todas as opções disponíveis no config.lua.
  </Card>

  <Card title="Solução de Problemas" icon="wrench" href="/suporte/solucao-problemas">
    Problemas com UI? Consulte o guia de troubleshooting.
  </Card>
</CardGroup>