Cycle Tracker

Cycle ring with day fraction in the middle, a phase label, next-period forecast, and a mood note.

14/ 28

Cycle

Ovulation windowPeriod in ~14 daysEnergy usually peaks today.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Health29 } from "@/components/beste/piece/health29";

<Health29
  cycleDay={14}
  cycleLength={28}
  phase="Ovulation window"
  nextPeriod="Period in ~14 days"
  moodNote="Energy usually peaks today."
  label="Cycle"
  tone="rose"
/>