@toolcase/game-components

🎮 Framework-free Web Components for game UIs — HUDs, menus, dialogs, inventories, minimaps, settings screens, and more. Built with vanilla HTML5 Custom Elements and Shadow DOM. No React, no Vue, no runtime libraries — just standard browser APIs.

📖 Live demos: toolcase.kalevski.dev/game-components

Why Web Components for game UI?

Drop-in anywhere — works in plain HTML, React, Vue, Svelte, Angular, or your custom engine.
Style isolation — Shadow DOM keeps game CSS out of your overlay and vice versa.
No bundle bloat — components are vanilla classes; tree-shake what you don't use.
Works with <canvas> — drop them on top of a Phaser / PixiJS / Three.js canvas.

Install

npm install @toolcase/game-components

Peer dependencies

@toolcase/base ^3.x

Setup

import { register } from '@toolcase/game-components'
import '@toolcase/game-components/style.css'

register() // registers every gc-* element on window.customElements

After register() runs, you can use the elements in any HTML — JSX, template literals, frameworks, plain markup.

Usage examples

Plain HTML

<gc-health-bar value="78" max="100"></gc-health-bar>
<gc-ammo-counter current="6" reserve="42"></gc-ammo-counter>
<gc-crosshair style="--crosshair-color: #00ff88;"></gc-crosshair>

React

function GameHUD({ hp, ammo }) {
    return (
        <>
            <gc-health-bar value={hp} max={100} />
            <gc-ammo-counter current={ammo.current} reserve={ammo.reserve} />
        </>
    )
}

If you're on TypeScript + React, declare gc-* in your global JSX namespace, or cast through as any until you generate types.

Vue

<gc-pause-menu></gc-pause-menu>
<gc-volume-slider :value="volume" @change="onVolume"></gc-volume-slider>

On top of a canvas

<style>
    .game { position: relative }
    .game gc-crosshair { position: absolute; inset: 0 }
</style>

<div class="game">
    <canvas id="phaser"></canvas>
    <gc-crosshair></gc-crosshair>
    <gc-health-bar value="80"></gc-health-bar>
    <gc-minimap></gc-minimap>
</div>

Available components

The library ships 130+ ready-made elements covering the full game UI surface:

Category	Examples
Resource bars	`gc-health-bar`, `gc-mana-bar`, `gc-stamina-bar`, `gc-ammo-counter`, `gc-boss-bar`, `gc-buff-bar`
Crosshair / damage / combat feedback	`gc-crosshair`, `gc-hit-marker`, `gc-damage-number`, `gc-combo-counter`, `gc-kill-feed`, `gc-screen-flash`
Heads-up display	`gc-compass-bar`, `gc-compass-rose`, `gc-minimap`, `gc-objective-marker`, `gc-waypoint-marker`, `gc-ping-display`, `gc-debug-overlay`, `gc-network-status-icon`
Inventory & items	`gc-item-slot`, `gc-item-tooltip`, `gc-item-compare`, `gc-hotbar`, `gc-inventory-grid`, `gc-equipment-doll`, `gc-loot-list`, `gc-loot-popup`, `gc-rarity-chip`, `gc-currency-chip`, `gc-currency-display`
Player / social	`gc-player-card`, `gc-player-frame`, `gc-portrait`, `gc-friends-list`, `gc-mute-list`, `gc-party-panel`, `gc-guild-panel`, `gc-chat-window`, `gc-invite-toast`, `gc-report-player-dialog`
Menus & screens	`gc-main-menu`, `gc-pause-menu`, `gc-pause-screen`, `gc-loading-screen`, `gc-loading-overlay`, `gc-title-screen`, `gc-result-screen`, `gc-game-over-screen`, `gc-victory-screen`, `gc-stats-screen`, `gc-matchmaking-screen`
Dialogues & prompts	`gc-dialogue-box`, `gc-confirm-dialog`, `gc-interact-prompt`, `gc-press-any-key`
Progression & quests	`gc-quest-tracker`, `gc-skill-tree`, `gc-skill-bar`, `gc-ability-card`, `gc-perk-picker`, `gc-codex`, `gc-journal`, `gc-achievement-list`, `gc-battle-pass`
Economy	`gc-shop-panel`, `gc-crafting-panel`, `gc-radial-wheel`
Lobby & matchmaking	`gc-lobby`, `gc-character-create`, `gc-character-select`, `gc-level-select`, `gc-save-slot-list`
Settings	`gc-fov-slider`, `gc-deadzone-slider`, `gc-volume-slider`, `gc-mouse-sensitivity`, `gc-fps-cap-select`, `gc-graphics-preset-picker`, `gc-vsync-toggle`, `gc-fullscreen-toggle`, `gc-invert-axis-toggle`, `gc-brightness-calibration`, `gc-controls-rebind-list`, `gc-key-binder`, `gc-controller-layout-preview`, `gc-reset-to-defaults`, `gc-settings-category-list`
Layout	`gc-stack`, `gc-grid`, `gc-anchor`, `gc-panel`, `gc-panel-header`, `gc-divider`, `gc-tab-bar`, `gc-page-indicator`, `gc-safe-area`, `gc-aspect-ratio-box`, `gc-letterbox-bars`
Typography & decoration	`gc-title`, `gc-subtitle`, `gc-eyebrow`, `gc-lore-text`, `gc-scroll-text`, `gc-version-label`, `gc-icon-badge`, `gc-gilded-frame`, `gc-rune-corner`, `gc-artboard-backdrop`, `gc-vignette-overlay`, `gc-blur-overlay`
Buttons & inputs	`gc-metal-button`, `gc-nav-button`, `gc-menu-item`, `gc-list-row`, `gc-toggle`, `gc-toggle-row`, `gc-select-row`, `gc-stat-row`, `gc-key`, `gc-gamepad-button-prompt`, `gc-platform-icon`, `gc-check`, `gc-combo-box`
Effects	`gc-shake-container`, `gc-transition-wipe`, `gc-particle-emitter`, `gc-cooldown-badge`, `gc-circular-progress`
Vehicle / driving HUD	`gc-speedometer`
Credits / legal	`gc-credits-list`, `gc-credits-scroll`, `gc-legal-screen`
Buffs	`gc-buff-icon`

Full per-component API (attributes, slots, events, CSS variables) lives at toolcase.kalevski.dev/game-components/SKILL.md.

Theming

Each component uses Shadow DOM, so global CSS doesn't leak in or out. Customize via CSS custom properties on the host:

gc-health-bar {
    --hp-fill: linear-gradient(90deg, #ff3a3a, #ff8a3a);
    --hp-bg: rgba(0, 0, 0, .6);
    --hp-height: 18px;
}

gc-crosshair {
    --crosshair-color: #00ff88;
    --crosshair-thickness: 2px;
}

Or rebuild from SCSS:

$panel-bg: #0c0e14;
@import '@toolcase/game-components/style/index.scss';

License

MIT