Vitals Grid

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

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

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

Import & use
import { Health10 } from "@/components/beste/piece/health10";

<Health10
  heading="Morning vitals"
  subtitle="Tue, Apr 22 · 08:14"
  vitals={[
    {
      "icon": "heart",
      "label": "Heart",
      "value": "72",
      "unit": "bpm"
    },
    {
      "icon": "temp",
      "label": "Temp",
      "value": "36.6",
      "unit": "°C"
    },
    {
      "icon": "bp",
      "label": "BP",
      "value": "118/76",
      "unit": "mmHg"
    },
    {
      "icon": "spo2",
      "label": "SpO₂",
      "value": "98",
      "unit": "%"
    }
  ]}
/>

More Health pieces

View all Health
Miso salmon with greens
25 min·520 kcal
Easy
DinnerHigh-proteinGluten-free

Recipe Card

health13

Recipe summary row with a warm chef tile, cook time, kcal, difficulty pill, and a dietary-tag row.

Heart rate
72bpm
Resting · Normal2 min ago

Heart Rate

health1

Resting bpm card with a pulsing heart tile, large value, and a mini ECG trace 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.

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

Blood Pressure

health2

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

98%
SpO₂Normal rangePulse 68 bpmMeasured just now

SpO2 Reading

health8

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

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.