Level Progress

Pro

Level and XP progress as a bar, ring or segments beside a level medallion. Levelling up is a real moment: the bar fills, the medallion pops, and leftover XP refills the new level.

Preview

Installation

npx @lumioui/cli add pro/level-progress

Usage

import { LevelMedallion, LevelProgress } from "@/components/ui/level-progress/level-progress";
<LevelProgress />

Also exported: LevelMedallion.

Examples

Fitness challenge

A month-long climbing challenge.

Game profile

A player profile on a dark game launcher.

Lesson streak

The top of a guitar course.

Loyalty tiers

A neighbourhood grocer's rewards card.

API reference

LevelMedallion

Prop Type Default
level* number —
shape "circle" | "shield" | "hex" "circle"
size "md" | "lg" "md"
children React.ReactNode

Replace the number with custom content (an icon for a tier).

 —
className string —

LevelProgress

Prop Type Default
level* number

Current level. Raising it plays the level-up.

 —
xp* number

XP earned inside the current level.

 —
goal* number

XP needed to finish the current level.

 —
layout "bar" | "ring" | "segments"

"bar" — medallion + bar (default). "ring" — level number inside a ring. "segments" — one segment per unit (lessons, workouts).

 "bar"
segments number

Segment count for layout "segments". Default goal (max 12).

 —
medallion
"circle" | "shield" +2 "circle" | "shield" | "hex" | "none"

Medallion shape for bar/segments. "none" hides it. Default "circle".

 "circle"
renderBadge (level: number) => React.ReactNode

Custom medallion content per level (tier icon).

 —
levelLabel (level: number) => string

Label for a level — default "Level 7". Tier names go here.

 (l) => `Level ${l}`
unit string

Unit after the XP numbers. Default "XP".

 "XP"
milestones LevelMilestone[]

Ticks on the bar — drawn as hairline cuts in the card colour, so the bar should sit on a bg-card surface. Labels switch on as the fill crosses them.

 —
hint string

Line under the bar. Default "160 XP to Level 8".

 —
size "md" | "lg" "md"
onLevelUp (level: number) => void

Fires on the wrap of a level-up.

 —
haptic boolean

Haptics: success on level-up, selection as a milestone switches on. Default true.

 true
className string —