Install with the CLI

Add XP Progress Bar 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 xp-progress-bar

First time? Start with the documentation.

Import

tsx

import { XP Progress Bar } from "./src/client/ui/components/xp-progress-bar";

Usage

tsx

<XPProgressBar currentXP={750} xpToLevel={1000} level={5} />

XP Progress Bar

TSX + LuauFree

An animated experience point progress bar with gradient fill, glow effect, level indicator, and percentage label. Smoothly interpolates between levels.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	HUDs
Dependencies	@rbxts/react
Theme Tokens	colors.bgSecondary, colors.primary, colors.primaryLight, colors.textPrimary