A composed combat HUD with health, mana, combo pips, cooldowns, ammo, and effects.

Player HUD

player-hud

BlocksBetablock

A composed combat HUD with meters, cooldowns, ammo, combo pips, and effects.

npx shadcn@latest add @gamecn/player-hud

Live Preview

Rendered with the component style selected in the top-right selector.

Frame

Scale100%

Health82/100

Mana64/100

90S1

48S2

16S3

Ammo

/ 72

Examples

Basic setup, game-state usage, and customization paths.

Install Player HUD and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/player-hud

import { PlayerHud } from '@/components/blocks/player-hud'

Use Player HUD with richer game-state data such as variants, empty states, compact density, or critical states.

<PlayerHUD
  compact
/>

Swap artwork, tune tokens, and wire the installed copy to your live game state.

<PlayerHUD
  className="max-w-5xl"
/>

Block Composition

Blocks install the composed screen and the UI pieces they need.

health-barresource-pipscooldown-radialammo-counterstatus-effect-stack

Data shape

{ health: number; mana?: number; ammo?: number; combo?: number; cooldowns?: number[]; effects?: StatusEffect[] }

Responsive behavior

Stacks into a single column on narrow screens and switches to a compact HUD row on medium screens.