react-macro-rings

Animated SVG circular progress rings for React — built for nutrition trackers, fitness dashboards, and health apps.

3 components. Zero dependencies. Pure SVG + inline styles.

---

When to use this

Use react-macro-rings when:

• You're building a nutrition tracker, calorie counter, or macro dashboard and need animated ring progress indicators
• You want pure SVG rings with no canvas, no chart library, no stylesheet to import
• You need rings that work in dark-mode apps out of the box (track color is transparent by default)
• You want to display protein / carbs / fat / calorie progress with a single component

Not the right fit if you need full chart types (bar, line, pie) — use Recharts or Victory for that. These rings are purpose-built for circular progress display.

---

Why not react-circular-progressbar?

react-circular-progressbar renders a single ring with a label. react-macro-rings ships three purpose-built components for nutrition UIs: a macro ring group that renders multiple rings from a data array, a calorie ring with built-in overflow color and a progress bar, and a single configurable ring for anything else. No CSS file to import, no stylesheet conflicts.

---

Components

Component	What it does
<MacroRing>	Single animated ring — protein, carbs, fat, steps, anything
<MacroRingGroup>	Row of rings from a data array
<CalorieRing>	Hero ring with label, remaining count, and progress bar

---

Install

npm install react-macro-rings

---

Usage

<MacroRing>

import { MacroRing } from 'react-macro-rings'

<MacroRing
  value={42}
  goal={160}
  color="#F0B429"
  label="Protein"
  unit="g"
/>

Props

Prop	Type	Default	Description
value	number	0	Current value
goal	number	100	Target value
color	string	'#52B788'	Ring color
label	string	''	Label below ring
unit	string	''	Unit suffix (g, kcal, %)
size	number	64	Diameter in px
strokeWidth	number	6	Ring thickness
trackColor	string	'rgba(255,255,255,0.08)'	Background track color
showPercent	boolean	true	Show % in center
showLabel	boolean	true	Show label + value below
animate	boolean	true	Animate on mount
style	object	{}	Wrapper style override

---

<MacroRingGroup>

import { MacroRingGroup } from 'react-macro-rings'

<MacroRingGroup
  rings={[
    { value: 42,  goal: 160, color: '#F0B429', label: 'Protein', unit: 'g' },
    { value: 180, goal: 200, color: '#60a0ff', label: 'Carbs',   unit: 'g' },
    { value: 30,  goal: 65,  color: '#f06060', label: 'Fat',     unit: 'g' },
  ]}
  size={64}
  gap="24px"
/>

Props

Prop	Type	Default
rings	array	[] — array of MacroRing prop objects
size	number	64
strokeWidth	number	6
gap	string	'24px'
justify	string	'space-around'
style	object	{}

---

<CalorieRing>

import { CalorieRing } from 'react-macro-rings'

<CalorieRing
  value={850}
  goal={2100}
  color="#52B788"
  overColor="#F0B429"
  showBar={true}
/>

Props

Prop	Type	Default	Description
value	number	0	Current calories
goal	number	2000	Calorie goal
color	string	'#52B788'	Normal ring color
overColor	string	'#F0B429'	Color when over goal
trackColor	string	'rgba(255,255,255,0.08)'	Track color
size	number	80	Ring diameter in px
strokeWidth	number	7	Ring thickness
showBar	boolean	true	Show progress bar below
animate	boolean	true	Animate on mount
style	object	{}	Wrapper style override

---

Full Dashboard Example

import { CalorieRing, MacroRingGroup } from 'react-macro-rings'

export default function Dashboard({ totals, goals }) {
  return (
    <div style={{ background: '#0f1a0f', borderRadius: 24, padding: 20 }}>
      <CalorieRing
        value={totals.cal}
        goal={goals.cal}
        color="#52B788"
        overColor="#F0B429"
      />

      <MacroRingGroup
        rings={[
          { value: totals.protein, goal: goals.protein, color: '#F0B429', label: 'Protein', unit: 'g' },
          { value: totals.carbs,   goal: goals.carbs,   color: '#60a0ff', label: 'Carbs',   unit: 'g' },
          { value: totals.fat,     goal: goals.fat,     color: '#f06060', label: 'Fat',     unit: 'g' },
        ]}
        style={{ marginTop: 20 }}
      />
    </div>
  )
}

---

Used in Production

Built from the real implementation powering Sage — an AI nutrition coach by Rewrite Labs.

---

Author

M. Adhitya — Builder, Rewrite Labs · Newsletter

License

MIT © 2025 M. Adhitya