Nutrition panel
Nutrition panel with a serving stepper that rescales values, a segmented energy ring, macro % of daily value bars and a compact chip variant.
Preview
Roast squash grain bowl
1 bowl · 385 g
kcal
27% of 2,000 kcal- Protein15% of energy21 g42%
- Carbohydrate49% of energy68 g26%
- Fat36% of energy22 g31%
- Saturated fat
- 3.1 g16%
- Sugars
- 9.4 g10%
- Fibre
- 8.2 g27%
- Sodium
- 610 mg27%
- Iron
- 5 mg26%
- Potassium
- 720 mg21%
% of daily value against a 2,000 kcal reference day.
Compact, on a menu card132kcalProtein4.2 gCarbs17 gFat5.1 g
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Food or dish name. |
| serving | string | — | What one serving is ("1 bowl"). |
| servingGrams | number | — | Weight of one serving in grams; shown scaled. |
| calories | number | — | Energy in one serving, kcal. |
| macros | { protein, carbs, fat } | — | Grams per serving; also drives the energy split. |
| nutrients | Nutrient[] | [] | Further rows: key, label, amount, unit (g, mg, µg), optional daily reference. |
| defaultServings | number | 1 | Starting servings (uncontrolled). |
| servings | number | — | Controlled servings. |
| onServingsChange | (servings: number) => void | — | Called when the stepper changes. |
| servingRange | [min, max, step] | [0.5, 6, 0.5] | Stepper bounds and step. |
| dailyCalories | number | 2000 | Daily energy reference for the ring and % values. |
| macroDaily | { protein, carbs, fat } | { 50, 260, 70 } | Daily references for the macro bars, grams. |
| variant | "panel" | "chips" | "panel" | Full panel, or a compact chip row. |
| locale | string | "en-US" | Number formatting locale. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.