Health Bar

health-bar

HUDReadycomponent

Accessible meter for health, mana, stamina, and threat values.

npx shadcn@latest add @gamecn/health-bar

Live Preview

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

Frame

Scale100%

Health82/100

Mana64/100

Threat96/120

Examples

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

Install Health Bar and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/health-bar

import { HealthBar } from '@/components/ui/health-bar'

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

<HealthBar
  className="max-w-md"
/>

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

<HealthBar
  iconSrc="/game-assets/health-bar.png"
/>