Macro Breakdown

Dish nutrition card with a kcal line, stacked macro bar, and three color-keyed grams-per-macro tiles.

Grilled chicken bowl620 kcal

Carbs68 g

Protein42 g

Fat22 g

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

Import & use

import { Food6 } from "@/components/beste/piece/food6";

<Food6
  dish="Grilled chicken bowl"
  kcal="620 kcal"
  macros={[
    {
      "label": "Carbs",
      "grams": 68,
      "pct": 40,
      "color": "bg-sky-500"
    },
    {
      "label": "Protein",
      "grams": 42,
      "pct": 34,
      "color": "bg-emerald-500"
    },
    {
      "label": "Fat",
      "grams": 22,
      "pct": 26,
      "color": "bg-amber-500"
    }
  ]}
/>