Components
Loading preview...
An 8-bit styled enemy health display built on the retro health-bar primitive. Shows enemy name, level, and a health bar with a percentage overlay, driven by current/max health values.
npx shadcn@latest add https://21st.dev/r/OrcDev/8bit-enemy-health-display"use client";
import EnemyHealthDisplay from "@/components/ui/8bit-enemy-health-display";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
<div className="w-full max-w-md space-y-6">
<EnemyHealthDisplay
enemyName="Fire Dragon"
level={25}
currentHealth={850}
maxHealth={1000}
healthBarVariant="retro"
healthBarColor="bg-red-500"
enemyNameColor="text-red-500"
/>
<EnemyHealthDisplay
enemyName="Goblin Warrior"
level={5}
currentHealth={45}
maxHealth={100}
healthBarVariant="retro"
healthBarColor="bg-orange-500"
enemyNameColor="text-green-500"
/>
</div>
</div>
);
}