Nutrition Label Component

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.

Pasta Carbonara

Standard nutrition label with common macronutrients and vitamins.

Nutrition Facts

Serving Size1 serving (200g)

Amount Per Serving

Calories

450180 from fat

% Daily Value*

Total Fat

20g26%

Saturated Fat

8g40%

Trans Fat

Cholesterol

60mg20%

Sodium

600mg26%

Total Carbohydrate

45g16%

Dietary Fiber

2g7%

Total Sugars

Protein

18g

Calcium15%

Iron25%

* 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.

Disclaimer: Nutrition information is provided for informational purposes only and is an estimate. Values may vary based on specific ingredients, brands, and regional variations. Ingredient nutritional content can differ between producers and locations worldwide. Please consult product packaging or a registered dietitian for precise nutritional information.

Extra Virgin Olive Oil

Label with monounsaturated and polyunsaturated fats, using the detailed variant.

Nutrition Facts

Serving Size1 tbsp (15ml)

Amount Per Serving

Calories

120120 from fat

% Daily Value*

Total Fat

14g18%

Saturated Fat

2g10%

Trans Fat

Polyunsaturated Fat

1.5g

Monounsaturated Fat

10g

Sodium

0mg0%

Total Carbohydrate

0g0%

Dietary Fiber

0g0%

Total Sugars

Protein

* 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.

Ricotta Cheese

Compact variant with reduced padding for smaller displays.

Nutrition Facts

Serving Size1/4 cup (62g)

Amount Per Serving

Calories

% Daily Value*

Total Fat

6g8%

Saturated Fat

4g20%

Cholesterol

20mg7%

Sodium

60mg3%

Total Carbohydrate

3g1%

Dietary Fiber

0g0%

Total Sugars

Protein

Calcium20%

* 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.

Italian Gelato

Complete nutrition label including added sugars and optional micronutrients.

Nutrition Facts

Serving Size1/2 cup (100g)

Amount Per Serving

Calories

20080 from fat

% Daily Value*

Total Fat

9g12%

Saturated Fat

5g25%

Trans Fat

Cholesterol

30mg10%

Sodium

50mg2%

Total Carbohydrate

28g10%

Dietary Fiber

0g0%

Total Sugars

25g

Includes Added Sugars

20g40%

Protein

Vitamin D0%

Calcium10%

Iron2%

Potassium120%

* 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.

Usage Example

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}
/>

Features

•FDA-style nutrition facts label formatting
•Automatic daily value percentage calculations
•Proper unit formatting (grams for macros, milligrams for sodium/cholesterol)
•Three variants: default, compact, and detailed
•Only displays provided nutrition values (optional props)
•Matches ContentCard styling patterns for consistency

Pasta Carbonara

Standard nutrition label with common macronutrients and vitamins.

Nutrition Facts

Serving Size1 serving (200g)

Amount Per Serving

Calories

450180 from fat

% Daily Value*

Total Fat

20g26%

Saturated Fat

8g40%

Trans Fat

Cholesterol

60mg20%

Sodium

600mg26%

Total Carbohydrate

45g16%

Dietary Fiber

2g7%

Total Sugars

Protein

18g

Calcium15%

Iron25%

* 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.

Extra Virgin Olive Oil

Label with monounsaturated and polyunsaturated fats, using the detailed variant.

Nutrition Facts

Serving Size1 tbsp (15ml)

Amount Per Serving

Calories

120120 from fat

% Daily Value*

Total Fat

14g18%

Saturated Fat

2g10%

Trans Fat

Polyunsaturated Fat

1.5g

Monounsaturated Fat

10g

Sodium

0mg0%

Total Carbohydrate

0g0%

Dietary Fiber

0g0%

Total Sugars

Protein

* 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.

Ricotta Cheese

Compact variant with reduced padding for smaller displays.

Nutrition Facts

Serving Size1/4 cup (62g)

Amount Per Serving

Calories

% Daily Value*

Total Fat

6g8%

Saturated Fat

4g20%

Cholesterol

20mg7%

Sodium

60mg3%

Total Carbohydrate

3g1%

Dietary Fiber

0g0%

Total Sugars

Protein

Calcium20%

* 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.

Italian Gelato

Complete nutrition label including added sugars and optional micronutrients.

Nutrition Facts

Serving Size1/2 cup (100g)

Amount Per Serving

Calories

20080 from fat

% Daily Value*

Total Fat

9g12%

Saturated Fat

5g25%

Trans Fat

Cholesterol

30mg10%

Sodium

50mg2%

Total Carbohydrate

28g10%

Dietary Fiber

0g0%

Total Sugars

25g

Includes Added Sugars

20g40%

Protein

Vitamin D0%

Calcium10%

Iron2%

Potassium120%

* 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.

Usage Example

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}
/>