Add Battle Pass 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 battle-passFirst time? Start with the documentation.
import { Battle Pass } from "./src/client/ui/components/battle-pass";local BattlePassService = require(script.Parent.BattlePassService)
local pass = BattlePassService.new({
{ tier = 1, freeReward = { amount = 100 }, premiumReward = { amount = 500 } },
{ tier = 2, freeReward = { amount = 150 }, premiumReward = { amount = 750 } },
}, 1000, true)
pass:AddXP(1000); pass:Claim(1, "premium")Seasonal tier track with free + premium reward lanes. BattlePassService holds tiers (each with freeReward + premiumReward), accrues XP into tiers, gates premium behind isPremium, and tracks claimed rewards per lane. BattlePassTrack renders the current tier window with an XP progress bar and claimable reward cells (gold for premium, blue for free).
by RobloxUI Team
| 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 |
| Last Updated | July 31, 2026 |