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

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Size of the progress bar
color	string	'pink'	Color of the progress indicator
borderColor	string	'black'	Border color of the progress bar
progress	number	0	Progress value (0-100)
className	string	''	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: