
Mantine Rings Progress - A Complete Rewrite Inspired by Apple Watch
The concentric ring progress component for Mantine gets a major upgrade: native RingProgress, glow effects, staggered animations, unified tooltips, and full accessibility — all in one release. Introduction Version 3.0.0 of @gfazioli/mantine-rings-progress is a ground-up rewrite. The internal fork of Mantine's RingProgress has been completely removed, replaced by the native component from @mantine/core . This eliminates ~600 lines of custom SVG and animation code while adding 10 new features that bring the component closer to the Apple Watch activity rings experience. Whether you're building fitness dashboards, goal trackers, or compact data visualizations, this release gives you the tools to make your rings shine — literally. ✨ New Features Per-ring Customization Each ring can now override global props individually. Mix thick and thin rings, toggle round caps per ring, or set a custom background track color: const rings = [ { value : 40 , color : ' cyan ' , thickness : 18 }, { value :
Continue reading on Dev.to React
Opens in a new tab




