https://github.com/gfazioli/mantine-rings-progress

An extension component for the Mantine UI Library to manage the Rings Progress feature, similar to the Apple Watch
https://github.com/gfazioli/mantine-rings-progress

apple-watch mantine mantine-ui mantine-v7 nextjs reactjs typescript

Last synced: 4 months ago
JSON representation

An extension component for the Mantine UI Library to manage the Rings Progress feature, similar to the Apple Watch

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-rings-progress
• Owner: gfazioli
• License: mit
• Created: 2024-02-09T12:35:04.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-04-14T14:42:30.000Z (6 months ago)
• Last Synced: 2025-04-14T15:51:23.017Z (6 months ago)
• Topics: apple-watch, mantine, mantine-ui, mantine-v7, nextjs, reactjs, typescript
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-rings-progress/
• Size: 8.85 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Mantine Rings Progress Component



  


https://github.com/user-attachments/assets/de494ff9-5e3c-4026-bdc3-0402110917e7



---



  

  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-rings-progress?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-rings-progress)

  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-rings-progress?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-rings-progress)

  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-rings-progress?style=for-the-badge&label=%20&color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-rings-progress)

  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-rings-progress?style=for-the-badge)




## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

[![Mantine UI Library](https://img.shields.io/badge/-MANTINE_UI_LIBRARY-blue?style=for-the-badge&labelColor=black&logo=mantine

)](https://mantine.dev/)

Display progress with animated rings like the Apple Watch activity app.

[![Mantine Extensions](https://img.shields.io/badge/-Watch_the_Video-blue?style=for-the-badge&labelColor=black&logo=youtube

)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)

[![Demo and Documentation](https://img.shields.io/badge/-Demo_%26_Documentation-blue?style=for-the-badge&labelColor=black&logo=typescript

)](https://gfazioli.github.io/mantine-rings-progress/)

[![Mantine Extensions HUB](https://img.shields.io/badge/-Mantine_Extensions_Hub-blue?style=for-the-badge&labelColor=blue

)](https://mantine-extensions.vercel.app/)

👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-rings-progress

```

or 

```sh

yarn add @gfazioli/mantine-rings-progress

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  const rings = [

    { value: 20, color: 'green' },

    { value: 80, color: 'blue' },

  ];

  return (

    

          

        

      }

    />

  );

}

```