shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Make the box fit the table with this meal kit product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds one recipe box, lemon pesto gnocchi. A Toggle Group picks 2, 3, 4 or 6 servings and a ruled list scales every ingredient from a typed amount per serving, so 125 g of gnocchi per person reads "250 g" for two and "750 g" for six. The price per serving falls as the box grows and the total is that price times the servings, in integer cents. The cell at the end draws the box with one pack for each serving, shows the total and holds the block's one Shine Button, "Add to bag", with an Undo. The cook time is plain text. Nothing is stored or bought. Guides rule the bands. For recipe boxes and any product sold by how many it feeds.
FAQ
How do I change the recipe?
Edit INGREDIENTS: each has the amount for one serving and its unit in the singular and plural, so 2 tomatoes become 4 for two people. The price for one serving at each box size is in SIZES in cents.
How is the price worked out?
The per-serving price is typed for each box size, since bigger boxes cost less per head, and the total is that price times the servings. Both are shown, and neither is rounded.
Why do the ingredients come before the box?
The servings control sits over the list it changes, so you read the choice and its effect together, and the total and the Add button follow in the next cell.
What stays local, and how do I wire it for real?
The servings 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.
