# Custom Indicators
Our HUD allows you to easily extend its functionality by registering your own components, such as a stamina bar, a job label, or even a cryptocurrency tracker.
### 1. RegisterComponent
Use this export to initialize a new element on the HUD. You can choose between a status type (circle near health, armour etc.) or a card type (for text and labels by default in top right).
{% code overflow="wrap" lineNumbers="true" %}
```lua
exports["17mov_Hud"]:RegisterComponent(componentName, componentData)
```
{% endcode %}
Parameters:
* `componentName` (string): A unique identifier for your component.
* `componentData` (table): A configuration table containing:
* `type`: The style of the component (`"status"` or `"card"`).
* `label`: The text displayed on the component.
* `icon`: A table containing `type` (`"svg"` or `"image"`) and the `data` (SVG string or file path).
* `position`: A table with `x` and `y` coordinates (from 0.0 to 1.0).
### 2. UpdateComponentValue
This export is used to dynamically update the data or progress of an existing component.
```lua
exports["17mov_Hud"]:UpdateComponentValue(name, value)
```
Parameters:
* `name` (string): The unique name of the component you wish to update.
* `value` (any): The new value.
* For status types, this is typically a float between `0.0` and `1.0`.
* For card types, this can be any string or number value
### 3. ToggleComponentVisibility
Allows you to show or hide a specific component based on game events (e.g., hiding the stamina bar when the player is in a vehicle).
```lua
exports["17mov_Hud"]:ToggleComponentVisibility(name, value)
```
Parameters:
* `name` (string): The unique name of the component.
* `value` (boolean): Set to `true` to show the component, or `false` to hide it.
### 4. Integration Examples
Below you can find a professional implementation of a Stamina status bar and a Job Information card.
```lua
CreateThread(function()
-- Registration: Stamina Component (Status Type)
-- Displays a circular progress for the player's stamina
exports["17mov_Hud"]:RegisterComponent("stamina", {
type = "status",
icon = {
type = "svg",
data = [[]],
},
})
-- Registration: Job Component (Card Type)
-- Displays a static or dynamic label for the player's current occupation
exports["17mov_Hud"]:RegisterComponent("job_info", {
type = "card",
label = "Current Job",
icon = {
type = "svg",
data = [[]],
},
position = { x = 0.5, y = 0.5 },
})
exports["17mov_Hud"]:UpdateComponentValue("job_info", "Unemployed")
while true do
Wait(500)
local exhaustionPercent = GetPlayerSprintStaminaRemaining(PlayerId())
local remainingStamina = (100.0 - exhaustionPercent) / 100.0
exports["17mov_Hud"]:UpdateComponentValue("stamina", remainingStamina)
end
end)
```