Water Tracker

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

Water1250 / 2000 ml

5 / 8

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

Import & use

import { Health6 } from "@/components/beste/piece/health6";

<Health6
  filled={5}
  total={8}
  mlPerCup={250}
  label="Water"
  tone="sky"
/>

More Health pieces

Stepsof 10,000

8,42084%

6.4 km310 kcal

health4

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

14/ 28

Cycle

Ovulation windowPeriod in ~14 daysEnergy usually peaks today.

health29

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

Hydration

1.8 L/ 2.5 L

72% of daily goal

health19

Bottle-shaped container that fills sky with gradient water, paired with current versus goal liters.

🙂

Mood todayGood

4 of 7 days above neutral this week.

health17

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

Morning vitalsTue, Apr 22 · 08:14

Heart72bpm

Temp36.6°C

BP118/76mmHg

SpO₂98%

health10

Daily check-in card summarizing heart, temperature, blood pressure, and SpO2 in a 2×2 tile grid.

74.2 kgGoal 72.0 kg

- 1.8 kg in 30 days

health16

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