---
title: UI Systems
type: docs
weight: 5
---

The UI Systems section covers user interface, permissions, and custom pages.

## Overview

{{< cards cols="2" >}}
  {{< card link="hud-manager" title="HUD Manager" subtitle="Control visibility of HUD components" icon="eye" >}}
  {{< card link="custom-pages" title="Custom Pages" subtitle="Create custom UI overlays" icon="document-text" >}}
  {{< card link="windows" title="Windows" subtitle="Inventory and crafting windows" icon="collection" >}}
  {{< card link="ui-files" title="UI Files" subtitle="The .ui markup language" icon="code" >}}
  {{< card link="ui-syntax" title="UI Syntax" subtitle="Variables, imports, templates" icon="document" >}}
  {{< card link="ui-widgets" title="UI Widgets" subtitle="Available widget types" icon="cube" >}}
  {{< card link="ui-properties" title="UI Properties" subtitle="Anchor, layout, padding" icon="adjustments" >}}
  {{< card link="ui-styles" title="UI Styles" subtitle="Styling system" icon="color-swatch" >}}
  {{< card link="permissions" title="Permissions" subtitle="Player permissions and access control" icon="shield-check" >}}
{{< /cards >}}

## Key Concepts

### HUD Components

The HUD consists of built-in components that can be shown or hidden:

- **Hotbar** - Item slots at the bottom of the screen
- **Health/Mana/Stamina** - Vital stat bars
- **Chat** - Text communication
- **Compass** - Direction indicator
- **Notifications** - Alert messages
- And many more...

### Custom Pages

Custom pages allow you to create overlay UIs using the `UICommandBuilder`:

```java
public class MyPage extends CustomUIPage {

    public MyPage(PlayerRef ref) {
        super(ref, CustomPageLifetime.CanDismiss);
    }

    @Override
    public void build(Ref<EntityStore> ref, UICommandBuilder builder,
                      UIEventBuilder events, Store<EntityStore> store) {
        // Build UI using builder.set(), builder.append(), etc.
        builder.append("Pages/MyTemplate.ui");
        builder.set("#title", "Welcome!");
    }
}
```

### Page Manager

Each player has a `PageManager` that handles custom pages:

```java
Player player = ...;
PageManager pageManager = player.getPageManager();

// Open a custom page
pageManager.openCustomPage(ref, store, new MyPage(player.getPlayerRef()));

// Close to normal view
pageManager.setPage(ref, store, Page.None);
```

## Accessing the HUD Manager

```java
Player player = ...;
HudManager hudManager = player.getHudManager();

// Hide all HUD components
hudManager.setVisibleHudComponents(player.getPlayerRef());

// Show specific components
hudManager.showHudComponents(player.getPlayerRef(),
    HudComponent.Hotbar,
    HudComponent.Health
);
```

## Architecture

```
Player
├── HudManager        → Controls HUD visibility
├── PageManager       → Manages custom pages
│   └── CustomUIPage  → Your custom UI
└── WindowManager     → Manages windows (inventory, crafting)
```

{{< callout type="info" >}}
UI operations are typically performed through the `PlayerRef` or `Player` component. Access these through events or the command context.
{{< /callout >}}