shadcn.io is not affiliated with official shadcn/ui
Recipe Manager CRUD Block for Vue
A home cook's recipe box where opening a recipe swaps the list for its page inside the same frame: change the servings and every ingredient rescales, edit ingredients and steps, start a blank recipe, and Delete offers Undo.
Installation
Overview
Keep a record whose numbers depend on each other, with this recipe box for Vue with Ark UI. A hairline frame with a plus mark on each corner holds one frame of fixed height that shows either the list or a recipe page, never both, so the block does not change height when you open one. The list has five recipes, each with its time, servings and ingredient count, and a New recipe Button. Opening a recipe swaps the frame for its page with a Back to recipes button: a name and minutes in Fields, a servings Number Input that rescales every ingredient as you type (4 servings of 300 g become 6 servings of 450 g, rounded to a step that suits the unit and worked from the saved amounts, so going back and forth never drifts), ingredient rows of quantity, unit Native Select and name with Add ingredient and Remove, and the steps in a Textarea. New recipe opens the same page blank. Save recipe, the only Shine Button, waits until something changed and refuses what is missing with its reason under the field and focus on the first problem; Delete recipe takes it out and the foot says "Removed Lentil stew." beside an Undo. The bands are ruled by Guides and removing every recipe shows an Empty state. For recipe boxes, bills of materials, formulas and any record with quantities that scale.
FAQ
How do I fill it with my own recipes?
Edit RECIPES: each has an id, a name, minutes, servings, a steps text and ingredients of qty, unit (g, ml, tsp, tbsp, cup or piece) and name. The list's summary line is derived from those fields. New recipe ids come from a counter held in state.
How does the rescaling work?
When a recipe opens, each ingredient keeps the amount it was saved with and the servings it was saved for. Changing the servings works every displayed amount from those saved ones: multiply by the new servings over the saved servings, then round to a step that suits the unit (1 or 5 for grams and millilitres, a quarter for spoons, cups and pieces). Going from 4 to 7 and back to 4 therefore returns to the original amounts. Typing an amount yourself on a scaled recipe stores what that amount means at the saved servings. Only whole servings from 1 to 24 are accepted.
What is checked when I save?
A name that is not empty and not another recipe's, minutes from 1 to 600, at least one ingredient where every ingredient has a name and an amount above zero, and some steps. A failed Save names how many things need fixing, marks each under its field and puts focus on the first. Save stays greyed out and says "No changes to save" until something differs from the stored recipe. A successful Save writes the scaled amounts and servings as the recipe's new values.
What does Undo restore?
The last removal only. Delete recipe stores the list as it was and returns to the list; Undo puts the recipe back and focuses its row. Saving or adding a recipe replaces that Undo. Nothing times out.
What stays local, and how do I wire a real save?
Recipes live in state in this tab and a reload brings the original five back. In your app send the draft from save to your API, and let the server return the stored recipe. The scaling stays on the client, since it only changes what is shown until Save.