shadcn.io is not affiliated with official shadcn/ui
Servings Scaler Recipe Gallery Block for Solid
A recipe with a servings slider that rescales every amount, five tick-box steps, and a drawn picture of the step you are on.
Installation
Overview
A recipe gallery for Solid with Ark UI. A Slider runs from 1 to 12 servings and the number beside it follows; every ingredient is worked out from the amounts written for four, with grams and millilitres to the nearest five and spoons and lemons to the nearest quarter, written as proper fractions ("1½ tbsp"), and teaspoons turn into tablespoons at three. The method is five tick boxes, with the numbers inside the steps (how many balls of dough, how long in the pan) following the servings too. On the other side of the split, a drawn 4:3 stage shows the step you are on, which is the first one not yet ticked, with its title, its text and a strip of the five moments; tick the last one and it says all five are done. "Start again" clears the ticks. On a phone the picture comes first and the list under it. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Slider, Checkbox and Button, with CSS transitions for the entrance. For recipe apps, food blogs and any recipe that scales.
FAQ
How are the amounts worked out?
Each ingredient in INGREDIENTS is typed once for four servings, with a unit. quantityOf multiplies by the servings over four and rounds: grams and millilitres to the nearest five, spoons and counted things to the nearest quarter, shown with a vulgar fraction. Teaspoons switch to tablespoons from three. Nothing is typed twice, so changing the base amount changes every size.
Why does the picture change when I tick a step?
The stage shows the first step you have not ticked, which is the one you are cooking now. Tick "Mix the dry" and the picture moves on to the dough; untick an earlier step and it goes back to it. When all five are ticked it shows the last step, the stack on a plate.
Where do the numbers in the steps come from?
Two flatbreads a serving gives the number of balls, the dough's weight over that number gives about 75 g each (the same at any size), and a minute and a half a flatbread, two at a time, gives the pan time. They are computed from the servings in STEPS, not typed.
Which keys work?
The slider takes the arrow keys (one serving at a time), Home and End. Each step is a checkbox: Tab to it and press Space. "Start again" is a button, and a polite line announces the servings and the current step.