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 — Founder, Rewrite Labs

License

MIT © 2025 M. Adhitya