Mantine Rings Progress Component

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>
      }
    />
  );
}

---

r.mp4

---