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