Install with the CLI

Add Quest Tracker to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add quest-tracker

First time? Start with the documentation.

Import

tsx

import { Quest Tracker } from "./src/client/ui/components/quest-tracker";

Usage

tsx

local QuestService = require(script.Parent.QuestService)
QuestService:Add({ id = "rats", title = "Rat Problem", objectives = {
  { label = "Defeat rats", current = 0, required = 5 } } })
QuestService:Progress("rats", 1, 1)

Quest Tracker

TSX + LuauFree

Active-quest state engine + sidebar UI. QuestService tracks quests with multiple objectives (Add, Progress with delta clamping, Complete). QuestTracker renders a compact card per active quest with checkmark/dot objective rows and current/required counts. Subscribe-based live updates.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Systems
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl