XP Bar
Free
A level badge and a spring-filled progress bar that bursts when the player levels up.
1
55 / 100 XP45 to level 2
Customize
100
35
#ffc24a
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/xp-bar.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/xp-bar.tsx.
Usage
import { XpBar } from "@/components/ui/xp-bar";
export function Profile({ xp }: { xp: number }) {
return <XpBar xp={xp} perLevel={100} />;
}Props
4 properties| Property | Type | Default | Description |
|---|---|---|---|
| xp | number | — | Total experience. Level and progress are derived from it. |
| perLevel | number | 100 | Experience needed for each level. |
| color | string | "#ffc24a" | Color of the badge, the bar and the burst. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion