Progress Bar

A customizable, pixel-art styled progress bar component.

Basic Usage

import { ProgressBar } from 'pixel-retroui';
function App() {
return (
<ProgressBar
size="md"
color="pink"
borderColor="black"
className="w-full"
progress={50}
/>
);
}

Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of the progress bar
colorstring'pink'Color of the progress indicator
borderColorstring'black'Border color of the progress bar
progressnumber0Progress value (0-100)
classNamestring''Additional CSS classes

Custom ProgressBar

Customize your progress bar's appearance by selecting a preset theme or creating your own color scheme.

Theme: pop

pop
50%
<ProgressBar
size="md"
color="#fefcd0"
borderColor="black"
className="w-full"
progress={50}
/>

Additional Examples

Different Sizes with Custom Colors

<ProgressBar size="sm" color="gray" progress={25} className="w-1/3" />
<ProgressBar size="md" color="green" progress={50} className="w-1/3" />
<ProgressBar size="lg" color="skyblue" progress={75} className="w-1/3" />

Preview: