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": "%"
    }
  ]}
/>