8bit Health Bar

Component 19

About

An 8-bit styled health bar built on the retro progress primitive. Shows a smooth red fill (default) or pixelated squares (retro variant), driven by a 0-100 value.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8bit Health Bar to your project and fits it to your theme.

Code

How 8bit Health Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import HealthBar from "@/components/ui/8bit-health-bar";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
        <div>
          <p className="text-sm text-muted-foreground mb-2">Default health bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>Health</span>
            <span>75%</span>
          </div>
          <HealthBar value={75} />
        </div>
        <div>
          <p className="text-sm text-muted-foreground mb-2">Retro health bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>Health</span>
            <span>45%</span>
          </div>
          <HealthBar value={45} variant="retro" />
        </div>
      </div>
    </div>
  );
}