← DOCS
fantasy

QuestLog

Fantasy quest log navigation with status indicators and wax seal.

npx chaos add quest-log

PREVIEW

⚔ Slay Dragon

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { QuestLog } from '@oalacea/chaosui/navigation/quest-log';

const quests = [
  { id: '1', title: 'Slay Dragon', status: 'active', progress: 75, level: 10 },
  { id: '2', title: 'Find Artifact', status: 'available', reward: '500g' },
];

<QuestLog quests={quests} activeQuest="1" onSelect={handleSelect} />

PROPS

PropTypeDefault
questsArray of quests {id, title, description?, status, progress?, reward?, level?}
Quest[]-
activeQuestCurrently active quest ID
string-
onSelectCallback when quest selected
(questId: string) => void-