Nutrition Label

FDA-style nutrition panel with a thick rule under calories and indented sub-nutrient rows.

Nutrition factsAbout 2 servingsServing size 1 cup (240 g)
Amount per servingCalories
280
% Daily value
Total fat 10 g13%
Saturated fat 2 g10%
Sodium 420 mg18%
Total carbs 34 g12%
Sugars 6 g
Protein 16 g

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

Import & use
import { Health12 } from "@/components/beste/piece/health12";

<Health12
  serving="Serving size 1 cup (240 g)"
  servings="About 2 servings"
  calories="280"
  rows={[
    {
      "label": "Total fat",
      "value": "10 g",
      "dv": "13%",
      "bold": true
    },
    {
      "label": "Saturated fat",
      "value": "2 g",
      "dv": "10%",
      "indent": true
    },
    {
      "label": "Sodium",
      "value": "420 mg",
      "dv": "18%",
      "bold": true
    },
    {
      "label": "Total carbs",
      "value": "34 g",
      "dv": "12%",
      "bold": true
    },
    {
      "label": "Sugars",
      "value": "6 g",
      "indent": true
    },
    {
      "label": "Protein",
      "value": "16 g",
      "bold": true
    }
  ]}
/>