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

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

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, 500px down the left edge of the game area in every dungeon type (panel background in text dungeons, transparent and click-through over the art in map/screen)	`dungeon`
`scene-content-top`	Inside the dialogue box, above the scene text (every dungeon type)	`sceneId`
`scene-content-bottom`	Inside the dialogue box, below the scene text and choices (every dungeon type)	`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

Default Components by Slot

game_state

ID	Description
`exploration`	Default exploration/dungeon view

overlay

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.

progression-tabs

ID	Description
`quests`	Quest log
`character`	Character sheet
`gallery`	Gallery tab
`encyclopedia`	Encyclopedia tab
`accolades`	Achievements tab (only when the game defines achievements)

character-tabs

ID	Description	Props
`character-sheet`	Statuses, stats and abilities
`inventory`	Party inventory	`inventory_id`, `maxHeight`
`skill-trees`	Skill tree interface

debug-tabs

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.

inventory-header

ID	Description	Props
`default-inventory-header`	Default inventory header with filters	`inventory_id`

ui-container

ID	Description
`character-list`	Party character list panel

Next Steps

Vue Components - Vue components overview and examples