shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let a hungry shopper build the dish and see what it costs and contains with this food product card for React with React Aria. A hairline frame with a plus mark on each corner holds one delivery bowl, drawn in greyscale, that changes with each choice: chilli marks for the spice, peanuts and coriander that disappear when held, a fried egg and a mound of rice when ticked. A Segment Group sets the spice (Mild, Medium, Hot), two Toggles leave out peanuts or coriander, and two Checkboxes add an egg or extra rice. A list gives the calories and the total, and the allergen line loses "peanuts" when they are held and gains "egg" with the egg. The block's one Shine Button says "Add to bag" with the total and turns into "Added" with an Undo. Nothing is stored or bought. Guides rule the bands. For restaurants, delivery menus and any dish with options.
FAQ
How do I change the dish and the options?
Edit the typed rows at the top: BASE_CENTS and BASE_KCAL, then SPICES, HOLDS and EXTRAS, each with a price in cents and calories. The total, the calories and the allergen line are worked out from those rows by small helpers, so they always agree with the drawing.
Are the allergen words reliable?
They are typed in this demo and follow the choices you make. In a real shop they must come from your kitchen's records and say whether the bowl is made where nuts are handled. Never rely on a front-end string alone.
How are the calories worked out?
A held ingredient takes its calories away, an extra adds its own and a hotter spice adds a little chilli oil. Everything is whole numbers.
What stays local, and how do I wire it for real?
The choices and the bag are page state. The bag is page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The picture is typed shapes: swap Picture for an img of the product.
