8bit Victory Screen

Cards 2

About

An 8-bit victory results screen built on the retro card, alert, and item primitives. Shows a VICTORY banner, stat panels (exp/gold), an items-obtained list with rarity colors and icons, and a battle report, all with pixel borders and dashed separators.

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

Code

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

Usage.tsx

"use client";

import VictoryScreen from "@/components/ui/8bit-victory-screen";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <VictoryScreen
        className="w-full max-w-[600px]"
        stats={[
          {
            id: 1,
            title: "Exp Gained",
            stats: "+1000",
          },
          {
            id: 2,
            title: "Gold Gained",
            stats: "+1450",
          },
        ]}
        itemsObtained={[
          {
            id: 1,
            name: "Rusty Sword",
            rarity: "common",
            icon: "/icons/sword.png",
          },
          {
            id: 2,
            name: "Steel Shield",
            rarity: "rare",
            icon: "/icons/shield.png",
          },
          {
            id: 4,
            name: "Dragon Scale",
            rarity: "legendary",
            icon: "/icons/dragonscale.png",
          },
        ]}
        battleReport={[
          {
            id: 1,
            title: "Turns Taken:",
            description: 10,
          },
          {
            id: 2,
            title: "Damage Dealt:",
            description: 4500,
          },
          {
            id: 3,
            title: "MVP",
            description: "Archer",
          },
        ]}
      />
    </div>
  );
}