Beautiful Progress Indicators

A lightweight, customizable React component library for creating stunning visual progress indicators. Built by developers for developers who love colorful UIs.

Terminal
npm install progressive-shapes

Interactive Playground

Adjust the values below and watch all shapes update in real-time!

Available Shapes

See how each shape renders with your custom settings

5/8

CircularProgress

import { CircularProgress } from "progressive-shapes";

function MyComponent() {
  return (
    <CircularProgress
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
    />
  );
}
Progress: 63%5 / 8

Heart

import { Heart } from "progressive-shapes";

function MyComponent() {
  return (
    <Heart
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
    />
  );
}
Progress: 63%5 / 8

Star

import { Star } from "progressive-shapes";

function MyComponent() {
  return (
    <Star
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
    />
  );
}
Progress: 63%5 / 8

Diamond

import { Diamond } from "progressive-shapes";

function MyComponent() {
  return (
    <Diamond
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
    />
  );
}
Progress: 63%5 / 8

Triangle

import { Triangle } from "progressive-shapes";

function MyComponent() {
  return (
    <Triangle
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
    />
  );
}
Progress: 63%5 / 8

Donut

import { Donut } from "progressive-shapes";

function MyComponent() {
  return (
    <Donut
      currentStep={5}
      totalSteps={8}
      size={100}
      backgroundColor="#FFE4E6"
      progressColor="#DC2626"
      thickness={0.3}
    />
  );
}
Progress: 63%5 / 8

Why Progressive Shapes?

Lightweight

Zero dependencies. Pure CSS and SVG. Minimal bundle size impact on your project.

TypeScript Ready

Full TypeScript support with type definitions included out of the box.

Fully Customizable

Every color, size, and property is customizable to match your design system.

Open Source & Community Driven

Progressive Shapes was built by feranmiba to help developers create more colorful and engaging UIs. We welcome contributions!

Have an idea for a new shape? Want to improve existing ones? The project is open for contributions. Help us make UI development more fun and colorful for everyone! 🎨

Contribute on GitHubRequest a Shape