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"
/>

More Health pieces

View all Health

Stepsof 10,000

8,42084%

6.4 km310 kcal

Steps Tracker

health4

Daily steps card with a gradient progress bar, percent chip, and a distance and calorie footer.

74.2 kgGoal 72.0 kg

- 1.8 kg in 30 days

Weight Trend

health16

Weight tracker with current and goal weights, a 30-day change pill, and a mini line chart underneath.

🙂

Mood todayGood

4 of 7 days above neutral this week.

Mood Tracker

health17

Mood log card with a big emoji for today and a seven-day row of color-keyed tiny face tiles.

Move420 / 600 kcal

Exercise32 / 45 min

Stand10 / 12 hr

Activity Rings

health5

Three concentric progress rings for move, exercise, and stand goals with a color-keyed legend.

Back squat5 × 5 · 80 kg

1:30

Set 4 of 5 · Keep going

Workout Set

health3

Lift tracker with an exercise header, set progress bar segments, and a rest-timer chip on the right.

Inhale34-7-8 · Round 2 of 4

Breathing Exercise

health26

Guided breathwork card with a pulsing sky ring, phase label, big second count, and cycle note.