Mantine Rings Progress Component

---

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Overview

This component is created on top of the Mantine library.

Mantine Rings Progress is a Mantine UI extension that enhances the RingProgress component to visualize multiple concurrent metrics as concentric rings in a single compact widget. Each ring is defined by a value and color, and the component accepts a richly customizable label—either plain text, emojis, or a fully composed React element—allowing you to present status or controls in the center.

The package includes stylesheet imports (standard or within a CSS layer) to align visuals with Mantine, and discourages inline tooltips because they interfere with label readability. Beyond static displays, it can power dynamic scenarios like a countdown timer, using separate rings to represent minutes, seconds, and hundredths, with configurable size and thickness to fit dashboards, monitors, or compact cards.

Note

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-rings-progress

or

yarn add @gfazioli/mantine-rings-progress

After installation import package styles at the root of your application:

import '@gfazioli/mantine-rings-progress/styles.css';

Usage

import { RingsProgress } from '@gfazioli/mantine-rings-progress';

function Demo() {
  const rings = [
    { value: 20, color: 'green' },
    { value: 80, color: 'blue' },
  ];

  return (
    <RingsProgress
      size={140}
      rings={rings}
      label={
        <ActionIcon color="yellow" variant="filled" radius="xl" size="xl">
          <IconCheck style={{ width: rem(22), height: rem(22) }} />
        </ActionIcon>
      }
    />
  );
}

Sponsor

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.

---

r.mp4

---