Player Progress
NewPro
A profile panel that brings an XP bar, a weekly streak, daily rewards and achievement toasts together.
Customize
#ffc24a
When to use it
- Profile or home screens in learning, fitness and habit apps
- Player hubs in web games that reward daily visits
- Loyalty or rewards pages in community and membership products
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Lines of code
- 81
Installation
Player Progress is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy player-progress.tsx into components/ui and run npm install motion.
Usage
import { PlayerProgress } from "@/components/ui/player-progress";
<PlayerProgress
name={user.name}
xp={user.xp}
streakDays={user.streakDays}
day={user.rewardDay}
onClaim={(day, reward) => claimReward(user.id, day, reward)}
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| name | string | — | Player or learner name; its first letter fills the avatar. |
| xp | number | — | Total experience. The level is derived from it. |
| perLevel | number | 100 | Experience needed for each level. |
| streakDays | number | — | Consecutive days completed this week, 0 to 7. |
| day | number | — | Today in the daily rewards track, counted from 1. |
| rewards | DailyReward[] | — | The seven rewards. Defaults to coins, gems and a chest. |
| onClaim | (day, reward) => void | — | Called when today's reward is claimed. Save it and update xp here. |
| achievement | { key; title; name } | null | null | Set a new key to pop an achievement over the panel. |
| color | string | "#ffc24a" | Accent for the avatar, the XP bar and today's reward. |
| className | string | — | Extra classes for the panel. |
Dependencies: motion