Enemy Health Display

A retro-styled enemy health display component that shows enemy name, level, and health bar. Perfect for RPG and action games.

8-bit Enemy Health Display component

Open in

Boss Enemy (High Health)

Fire DragonLv.25
850/1000
85%

Regular Enemy (Medium Health)

Goblin WarriorLv.5
45/100
45%

Elite Enemy (Critical Health)

Dark KnightLv.15
12/200
6%

Installation

pnpm dlx shadcn@latest add @8bitcn/enemy-health-display

Usage

Basic Usage

import EnemyHealthDisplay from "@/components/ui/8bit/enemy-health-display";

export default function GameUI() {
  return (
    <EnemyHealthDisplay
      enemyName="Fire Dragon"
      level={25}
      currentHealth={850}
      maxHealth={1000}
    />
  );
}

Customization

<EnemyHealthDisplay
  enemyName="Dark Knight"
  level={15}
  currentHealth={12}
  maxHealth={200}
  healthBarVariant="retro"
  healthBarColor="bg-purple-500"
  showLevel={true}
  showHealthText={true}
  size="lg"
  color="purple"
/>

Props

Required Props

  • enemyName - Enemy name to display
  • currentHealth - Current health value
  • maxHealth - Maximum health value

Optional Props

  • level - Enemy level
  • showLevel - Show level (default: true)
  • showHealthText - Show health text (default: true)
  • healthBarVariant - "retro" | "default"
  • healthBarColor - Health bar color class

Styling Props

  • variant - "retro" | "default"
  • size - "sm" | "md" | "lg"
  • color - Text color variant
  • className - Additional CSS classes