8bit Quest Log

Component

About

An 8-bit styled quest log panel with accordion items, status badges (active/completed/failed/pending), and a scrollable list. Source-verbatim from the 8bitcn quest-log block.

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

Code

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

Usage.tsx

import { QuestLog } from "@/components/ui/8bit-quest-log";

export default function Demo() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8 retro">
      <QuestLog
        quests={[
          {
            id: "quest-1",
            title: "Defeat the Goblin King",
            description: "The Goblin King has been terrorizing the village for weeks. Travel to the Dark Forest and defeat him to restore peace.",
            status: "active",
            shortDescription: "Defeat the Goblin King in the Dark Forest.",
          },
          {
            id: "quest-2",
            title: "Collect Dragon Scales",
            description: "The local blacksmith needs dragon scales to forge the ultimate armor.",
            status: "active",
            shortDescription: "Collect 10 dragon scales from the Dragon's Lair.",
          },
          {
            id: "quest-3",
            title: "Deliver the Potion",
            description: "The village healer needs this healing potion delivered to the wounded knight.",
            status: "completed",
            shortDescription: "Deliver healing potion to the wounded knight.",
          },
          {
            id: "quest-4",
            title: "Find the Lost Artifact",
            description: "An ancient artifact has been stolen from the museum.",
            status: "failed",
            shortDescription: "Investigate the stolen artifact and find the thief.",
          },
          {
            id: "quest-5",
            title: "Escort the Merchant",
            description: "A wealthy merchant needs protection while traveling.",
            status: "pending",
            shortDescription: "Protect the merchant through the mountain pass.",
          },
        ]}
        maxHeight="350px"
        className="w-full max-w-[500px]"
      />
    </div>
  );
}