shadcn.io is not affiliated with official shadcn/ui
Product Nutrition Storefront Block for React Aria
A nutrition label for a granola: switch between per serving and per 100 g, count one to six servings, and every row, percent daily value and the calorie split bar follows.
Installation
Overview
Show what is in a food product the way people expect to read it, with this nutrition label for React with React Aria. A header says what Fiddlehead, a small granola maker, sells. In a hairline frame with a plus mark on each corner, a toolbar holds a Segment Group for Per serving or Per 100 g and a servings stepper from one to six. The label is a native table in a bold-ruled frame: the servings per pack, the amount shown, the calories at display size and then each nutrient with its percent daily value, worked out from the typed grams and a typed reference amount, with the fibre and sugars indented under carbohydrate. A bar beside it splits the calories into fat, carbohydrate and protein by largest remainder, and the ingredients open in a disclosure. The reference amounts are an example and the label says so. It's built from Segment Group, Button and Guides, with a native table and a CSS entrance only. For a food product page, a recipe card or a menu.
FAQ
How do I use my own nutrients?
Edit NUTRIENTS: each row has an amount per 100 g (in tenths of a gram, or in milligrams for sodium), a daily reference amount (0 for none), a unit and whether it is indented. The serving size, the pack count and the ingredients are constants above it.
Where do the calories come from?
They are worked out from the fat, carbohydrate and protein grams, at 9 calories a gram for fat and 4 for the others, and scaled to the amount shown. If you have a lab figure, set the calories directly and keep the split bar's grams.
How do the servings scale the label?
The amount shown is the serving size times the count, and each row is the per 100 g amount scaled to it and rounded once. Per 100 g locks the stepper, since the amount is fixed.
What stays local, and how do I wire it to real data?
The figures are a sample, the reference values are an example and nothing is sent. Check the format and the reference values required where you sell; this is not a regulatory label. Replace the constants with your product data.