8-bit Xp Bar

Component 24

About

Pixel-art XP / experience bar from 8bitcn.com — chunky pixel borders, retro fill. Wraps Radix Progress; default and retro variants; flashing 'LEVEL UP!' animation at 100%.

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

Code

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

Usage.tsx

import XpBar from "@/components/ui/8bit-xp-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 XP bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>XP</span>
            <span>65%</span>
          </div>
          <XpBar value={65} />
        </div>
        <div>
          <p className="text-sm text-muted-foreground mb-2">Retro XP bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>XP</span>
            <span>45%</span>
          </div>
          <XpBar value={45} variant="retro" />
        </div>
        <div>
          <p className="text-sm text-muted-foreground mb-2">Level Up! (100%)</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>XP</span>
            <span>100%</span>
          </div>
          <XpBar value={100} />
        </div>
      </div>
    </div>
  );
}