Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
Create game-like interfaces with state-driven visuals for health, XP, mana, and other game metrics.
Build on the Progress component with game-specific variants:
import { Progress } from "@/components/ui/8bit/progress";
function HealthBar({ value = 100, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-red-500"
/>
);
}
function ManaBar({ value = 100, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-blue-500"
/>
);
}
function XpBar({ value = 0, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-yellow-500"
/>
);
}
Show animated messages when thresholds are reached:
function XpBar({
value,
levelUpMessage = "LEVEL UP!",
...props
}: XpBarProps) {
const isLevelUp = value === 100;
return (
<div className="relative">
<Progress
{...props}
value={value}
progressBg="bg-yellow-500"
className={cn(isLevelUp && "animate-pulse")}
/>
{isLevelUp && (
<div
className={cn(
"retro",
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
"text-[0.625rem] text-black",
"pointer-events-none whitespace-nowrap z-10",
"drop-shadow-[1px_1px_0_#fff] [text-shadow:1px_1px_0_#fff,-1px_-1px_0_#fff,1px_-1px_0_#fff,-1px_1px_0_#fff]",
"animate-[blink_0.5s_step-end_infinite]"
)}
>
{levelUpMessage}
</div>
)}
</div>
);
}
Use conditional classes for game state feedback:
<div
className={cn(
"transition-colors duration-300",
health <= 25 ? "animate-pulse bg-red-500/20" : "bg-green-500",
health > 25 && health <= 50 && "bg-yellow-500/20"
)}
/>
Compact display for combat scenarios:
function EnemyHealth({ health, maxHealth }: EnemyHealthProps) {
const percentage = (health / maxHealth) * 100;
return (
<div className="retro text-xs">
<div className="flex justify-between mb-1">
<span>ENEMY</span>
<span>{health}/{maxHealth}</span>
</div>
<HealthBar value={percentage} className="h-2" />
</div>
);
}
.retro class for pixel font numbersanimate-pulse, animate-blink for feedbackcomponents/ui/8bit/health-bar.tsx - Health bar implementationcomponents/ui/8bit/xp-bar.tsx - XP bar with level up notificationcomponents/ui/8bit/mana-bar.tsx - Mana bar implementation