Hydration Fill

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

Hydration
1.8 L/ 2.5 L
72% of daily goal

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

Import & use
import { Health19 } from "@/components/beste/piece/health19";

<Health19
  label="Hydration"
  current="1.8 L"
  goal="2.5 L"
  fillPercent={72}
  tone="sky"
/>

More Health pieces

View all Health
Water1250 / 2000 ml
5 / 8

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

Lisinopril10 mg · 1 tab daily
Morning with food
8 of 30 leftRefill on May 12
Ships from Green Cross Pharmacy

Prescription

health28

Prescription card with a dose line, schedule note, supply bar that flips rose when low, and refill date.

Morning vitalsTue, Apr 22 · 08:14
Heart72bpm
Temp36.6°C
BP118/76mmHg
SpO₂98%

Vitals Grid

health10

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

98%
SpO₂Normal rangePulse 68 bpmMeasured just now

Oxygen saturation ring with the percentage stacked in the center and a pulse note on the side.

Blood pressure
Normal
118/76mmHg
Measured at 08:42

BP reading pairing systolic over diastolic with a status pill and a color-dotted legend beneath.

Inhale34-7-8 · Round 2 of 4

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