Component Slots Reference
This page lists all available UI slots where you can register custom Vue components using game.addComponent().
See Vue Components for usage examples.
State-based slots show one component at a time based on a state value. The slot renders whichever component's id matches the current state.
| Slot | State | Description |
|---|
game_state | game_state | Main game view (exploration, battle, custom screens) |
overlay | overlay_state | Overlay layer (navigation map, exchange UI) |
popup | popup_state | Modal popups. popup_state is a stack (multiple can be open, rendered on top of each other). Each registered popup may set mask on addComponent to control its backdrop (omit = default dim, false = none, or a CSS color). |
progression-tabs | progression_state | Side panel tabs (quests, characters, gallery) |
character-tabs | progression_sub_state | Sub-tabs within character sheet |
Injection slots render all registered components together. They act as extension points throughout the UI where you can inject custom content.
Each slot passes context props to registered components, giving them access to parent data.
| Slot | Where it appears | Context Props |
|---|
ability-card-header | Inside ability card header | abilityId, characterId |
ability-card-meta | After ability cooldown/costs | abilityId, characterId |
ability-card-footer | Bottom of ability card | abilityId, characterId |
abilities-viewer-top | Before ability list | character |
abilities-viewer-list | Inside ability list | character |
abilities-viewer-bottom | Bottom of abilities viewer | character |
character-face | Character face display | character |
character-list-item | Inside character face in party list (via overlaySlot) | character |
character-sheet-top | Top of character sheet (above stats) | |
character-sheet-bottom | Bottom of character sheet (below abilities) | |
character-statuses-top | Inside status list, before items/statuses (inline) | character |
character-statuses-bottom | Inside status list, after items/statuses (inline) | character |
debug-panel | Debug panel | activeTabId |
events-container | Events/dialogue area | sceneSlots |
exploration-state | Inside exploration view | dungeon, currentRoom |
inventory | Inside inventory component | inventory |
inventory-header | Header above inventory grid | inventory |
item-card-top | Item card, before the description | item |
item-card | Item card, after the body | item |
item-choices | Item choice popups | item |
item-grid | Inventory grid area | items |
menu-after | After main menu content | menuState |
menu-before | Before main menu content | menuState |
mod-picker | Inside mod picker UI | availableMods, selectedMods |
navigation-toolbar | Buttons in map toolbar | |
overlay-navigation | Navigation map overlay | dungeon, choices |
overlay-navigation-side | Side column next to the navigation overlay (right column in text dungeons, right edge of viewport in screen dungeons) | dungeon |
scene-content-top | Above scene dialogue content (text dungeons) | sceneId |
scene-content-bottom | Below scene choices (text dungeons) | sceneId |
progression-container | Progression side panel | activeTab, selectedCharacter |
quests-tab | Quests panel | selectedQuest |
replay-custom-block | Custom content in replay mode | replayMode, data |
ui-container | Main UI layer | |
| ID | Description |
|---|
exploration | Default exploration/dungeon view |
| ID | Description |
|---|
overlay-navigation | Map navigation overlay |
overlay-exchange | Trade/loot exchange UI |
Hoist: Overlays render below the UI layer (z-index 300 vs 400). To render an overlay above the UI, add the overlay-hoist class to its root element. This bumps the overlay wrapper to z-index 500.
| ID | Description |
|---|
quests | Quest log |
character | Character sheet |
gallery | Gallery tab |
encyclopedia | Encyclopedia tab |
accolades | Achievements tab (only when the game defines achievements) |
| ID | Description | Props |
|---|
character-sheet | Statuses, stats and abilities | |
inventory | Party inventory | inventory_id, maxHeight |
skill-trees | Skill tree interface | |
| ID | Description |
|---|
debug-options | Debug options |
debug-dungeons | Dungeon debugging |
debug-characters | Character debugging |
debug-choices | Choice debugging |
debug-registry | Registry viewer |
debug-inventories | Inventory debugging |
debug-stores | Store debugging |
| ID | Order | Description |
|---|
toolbar-back | 1 | Back button |
toolbar-encounter-nav | 2 | Encounter navigation |
toolbar-logs | 3 | Open logs |
toolbar-dungeon-name | 20 | Dungeon name (spinner while the dungeon's art loads) |
toolbar-toggle-circles | 30 | Toggle interaction circles |
toolbar-zoom-controls | 31 | Zoom in/out |
toolbar-center-room | 32 | Center on current room |
toolbar-minimize | 33 | Minimize toolbar |
The dungeon name stretches to fill the bar, so everything below order 20 sits in the left group and everything above it in the right group. Pick your button's order accordingly.
| ID | Description | Props |
|---|
default-inventory-header | Default inventory header with filters | inventory_id |
| ID | Description |
|---|
character-list | Party character list panel |