Quest Tracker
NewPro
A quest log where objectives tick off with drawn checks, progress bars fill, and a finished quest bursts with light before it folds away.
Customize
Auto-play demo
Rewards
Fold when done
#ff784f
#ffc24a
When to use it
- Quest logs and side panels in RPG and open world games
- Onboarding checklists that show new users what to do next
- Course modules or fitness challenges made of smaller goals
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 609
Installation
Quest Tracker is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy quest-tracker.tsx into components/ui and run npm install motion.
Usage
import { QuestTracker } from "@/components/ui/quest-tracker";
<QuestTracker
defaultQuests={[
{
id: "cold-forge",
title: "The Cold Forge",
zone: "Kael's Pass",
reward: "250 XP",
objectives: [
{ id: "ore", label: "Collect iron ore", current: 3, target: 5 },
{ id: "light", label: "Light the furnace" },
],
},
]}
onComplete={(quest) => grantReward(quest.id)}
/>Props
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| quests | Quest[] | — | Quests with their progress. Pass it with onProgress to control the tracker. |
| defaultQuests | Quest[] | 3 sample quests | Starting quests when the tracker manages its own state. |
| onProgress | (questId: string, objectiveId: string, current: number) => void | — | Called when the player advances an objective, with its new progress. |
| onComplete | (quest: Quest) => void | — | Called once when the last objective of a quest is finished. |
| interactive | boolean | true | Let the player click objectives to advance them. |
| title | string | "Quests" | Heading of the panel. |
| color | string | "#ff784f" | Accent color for checks and bars. |
| completeColor | string | "#ffc24a" | Color of finished quests and the flourish. |
| showRewards | boolean | true | Show the reward line of each quest. |
| flourish | boolean | true | Play the light sweep and sparks when a quest completes. |
| collapseCompleted | boolean | true | Fold a quest away shortly after it completes. |
| defaultCollapsed | boolean | false | Start with the whole panel folded. |
| className | string | — | Extra classes for the panel. |
Dependencies: motion