Components
Loading preview...
Pixel-art XP / experience bar from 8bitcn.com — chunky pixel borders, retro fill. Wraps Radix Progress; default and retro variants; flashing 'LEVEL UP!' animation at 100%.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-xp-barimport XpBar from "@/components/ui/8bit-xp-bar";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">Default XP bar</p>
<div className="flex justify-between text-sm mb-2 retro">
<span>XP</span>
<span>65%</span>
</div>
<XpBar value={65} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">Retro XP bar</p>
<div className="flex justify-between text-sm mb-2 retro">
<span>XP</span>
<span>45%</span>
</div>
<XpBar value={45} variant="retro" />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">Level Up! (100%)</p>
<div className="flex justify-between text-sm mb-2 retro">
<span>XP</span>
<span>100%</span>
</div>
<XpBar value={100} />
</div>
</div>
</div>
);
}