shadcn.io is not affiliated with official shadcn/ui
Level Up Success Block for React
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 Base UI. 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)".
Related
- Pro
A panel for a reading streak kept alive: the streak counted up to 14 days, a progress bar to the Weekly Warrior badge, and a five-week table of days read, missed and still to come.
- Pro
A page for the week weekly active users passed 10,000: a greyscale medal, a line of twenty weeks with the crossing marked and described in text, a ring of the way to the next milestone, and a quiet fall of confetti.
- Pro
Loyalty Tier Success
Plans and limitsA tier-unlocked page for a rewards program: a drawn membership card beside the message, points toward the next tier, and a table of perks for the tier now and the tier next.
- Pro
A page for a revenue goal passed at 108%: a bullet chart with a tick at 100%, three sub-goals each with a signed difference, a group of buttons that raises the next target by 10, 20 or 30 percent, and a Celebrate button that throws confetti.
- Pro
Streak Tracker Dialog
Time and schedulingA habit app's list with a daily check-in dialog shown open: a flame and the days in a row, a five-week calendar with this week's days large, milestones at 7, 14 and 30, and a check-in that moves the number.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.