Loading...
Loading...
The NutritionLabel component displays nutrition information in a standard FDA-style nutrition facts label format. It automatically calculates daily value percentages and formats units correctly.
Standard nutrition label with common macronutrients and vitamins.
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
Label with monounsaturated and polyunsaturated fats, using the detailed variant.
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
Compact variant with reduced padding for smaller displays.
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
Complete nutrition label including added sugars and optional micronutrients.
* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
import { NutritionLabel } from '@/components/ui/nutrition-label'
<NutritionLabel
servingSize="1 serving (200g)"
calories={450}
totalFat={20}
saturatedFat={8}
cholesterol={60}
sodium={600}
totalCarbohydrates={45}
dietaryFiber={2}
totalSugars={3}
protein={18}
calcium={15}
iron={25}
/>