shadcn.io is not affiliated with official shadcn/ui
Servings Scaler Recipe Gallery Block for React
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 React with Base 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.
Related
- Pro
Product Showcase Gallery
Stage and thumbnailsA product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
- Pro
Split View Gallery
Stage and thumbnailsAn asset-review split: a listbox of eight files with small drawings at the start, the chosen file's preview and details at the end, and a divider you drag or arrow to resize.
- Pro
Rate a Picture Rating Gallery
Select and actSix dishes with a five-star rating each, a seeded average and count that your vote joins, and a Sort group for top rated and most rated.
- Pro
Thumbnail Strip Gallery
Stage and thumbnailsA viewer for a lighting shop: a framed 4:3 stage with Previous and Next, its caption beside it, and a scrollable strip of twelve thumbnails whose arrow keys step through the pictures.
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- Pro
Tab Swap Split Showcase Features
Tabs and accordionsA features section for a release tool: a line tab switch (Plan, Ship, Review) that swaps one split band, with a drawing flush to the start rail and the copy on the end side.