Components
Loading preview...
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.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-victory-screen"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>
);
}