shadcn.io is not affiliated with official shadcn/ui
Level Up Success Block for React Aria
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.
Installation
Overview
Make a level feel earned with this confirmation page for React with React Aria. It is the page Questloop, a language-learning app, shows when a lesson carries a learner past the end of a level: the page's side rails and one band frame it, start-aligned, and the heading says Level 5 was reached. One framed panel counts up the +240 XP with Counting Number, then draws the bar wrapping round with two Progress bars: Level 4 full and ticked, and Level 5 at the 20 XP that carried over, out of 500. Under it three perk cells say what the level unlocked. A thin fall of Confetti drifts behind the band. The Shine Button, Try the new perks, is pinned to the foot of a phone's screen. For games, learning apps and loyalty schemes.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was earned. The XP before the lesson, the XP earned, the level size and the three perks are typed constants. To wire it, read those from the learner's record when a lesson ends; the new level and the carry-over are worked out from them, so they are never stored twice. Point the button at where the perks live.
How is the carry-over worked out?
The XP before plus the XP earned is divided by the size of a level: each full level adds one to the level number, and the remainder is the XP inside the new level. Here 280 plus 240 is 520, so the learner is in Level 5 with 20 of 500.
What happens to the confetti with reduced motion?
It is hidden: the layer carries motion-reduce:hidden, so a visitor who asked for less motion sees no pieces. Otherwise it is a low count of pieces falling slowly behind the content, decoration only, taking no clicks. The XP figure shows its final value at once with reduced motion.
How does a screen reader hear the bars?
Each is named with its level and its XP, "Level 4, 500 of 500 XP" and "Level 5, 20 of 500 XP", and the same words appear beside it. The tick on Level 4 has a hidden "(complete)".