Meal Macros

Meal log pairing kcal with a three-segment macro bar for carbs, protein, and fat grams.

Lunch · Grilled chicken bowl620 kcal · 124 g total

Carbs68 g

Protein34 g

Fat22 g

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

Import & use

import { Health9 } from "@/components/beste/piece/health9";

<Health9
  meal="Lunch · Grilled chicken bowl"
  kcal={620}
  macros={[
    {
      "label": "Carbs",
      "grams": 68,
      "class": "bg-sky-500",
      "text": "text-sky-500"
    },
    {
      "label": "Protein",
      "grams": 34,
      "class": "bg-emerald-500",
      "text": "text-emerald-500"
    },
    {
      "label": "Fat",
      "grams": 22,
      "class": "bg-amber-500",
      "text": "text-amber-500"
    }
  ]}
/>