Steps Tracker

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

Stepsof 10,000
8,42084%
6.4 km310 kcal

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

Import & use
import { Health4 } from "@/components/beste/piece/health4";

<Health4
  steps={8420}
  goal={10000}
  distance="6.4 km"
  kcal="310 kcal"
  label="Steps"
  tone="emerald"
/>

More Health pieces

View all Health
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.

🙂
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.

14/ 28
Cycle
Ovulation windowPeriod in ~14 daysEnergy usually peaks today.

Cycle Tracker

health29

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

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.

Sleep scheduleTarget 8 hours
Bedtime23:15
Wake06:45
6 days on schedule this week

Sleep Schedule

health14

Sleep planner card bracketing bedtime and wake times with sunset and sunrise icons and a consistency bar.

Water1250 / 2000 ml
5 / 8

Water Tracker

health6

Eight-cup water grid that fills sky-tinted glasses as you log ml toward a daily hydration goal.