Components
Loading preview...
An 8-bit styled mana bar built on the retro progress primitive. Shows a smooth blue fill (default) or pixelated squares (retro variant), driven by a 0-100 value.
npx shadcn@latest add https://21st.dev/r/OrcDev/8bit-mana-bar"use client";
import ManaBar from "@/components/ui/8bit-mana-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 mana bar</p>
<div className="flex justify-between text-sm mb-2 retro">
<span>Mana</span>
<span>75%</span>
</div>
<ManaBar value={75} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">Retro mana bar</p>
<div className="flex justify-between text-sm mb-2 retro">
<span>Mana</span>
<span>45%</span>
</div>
<ManaBar value={45} variant="retro" />
</div>
</div>
</div>
);
}