Sleep Summary

Overnight sleep card with a score pill, stacked stage bar, and a four-column stage breakdown.

Sleep7h 41m

Score 86

Awake0h 18m

Light4h 0m

Deep1h 35m

REM1h 48m

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

Import & use

import { Health7 } from "@/components/beste/piece/health7";

<Health7
  totalHours="7h 41m"
  score={86}
  stages={[
    {
      "label": "Awake",
      "minutes": 18,
      "class": "bg-rose-400",
      "text": "text-rose-500"
    },
    {
      "label": "Light",
      "minutes": 240,
      "class": "bg-sky-400",
      "text": "text-sky-500"
    },
    {
      "label": "Deep",
      "minutes": 95,
      "class": "bg-indigo-500",
      "text": "text-indigo-500"
    },
    {
      "label": "REM",
      "minutes": 108,
      "class": "bg-violet-500",
      "text": "text-violet-500"
    }
  ]}
  label="Sleep"
  tone="violet"
/>