shadcn.io is not affiliated with official shadcn/ui
Recipe Cards Carousel Block for React Aria
Six recipe cells with a drawn dish, timings and five ingredient lines, plus one Servings field that rescales every quantity in every recipe, rounding grams, counts and spoons the way a cook would.
Installation
Overview
Scale a week of dinners to the people at the table, with this recipe cards carousel for React with React Aria. Mealwright, a meal-planning app, shows six recipes (lemon pasta, fish tacos, mushroom risotto, chickpea curry, shakshuka and banana pancakes) as hairline cells. Each has a drawn dish, the name, prep and cook minutes, a difficulty word, what the recipe makes as written and five ingredient lines. One toolbar field sets the servings: type a number, or step it with the minus and plus Buttons. Every quantity in every cell follows at once: grams and millilitres round to the nearest five, counted things (eggs, limes) to the nearest half and spoons to the nearest quarter, with "1½" and "¾" written as a cook would, and each cell says how many times the original it now is ("For 6, ×3"). A number outside 1 to 24 is refused with the reason and the last good number stays in use. The foot holds the counter, a dot for each step and Previous and Next. Three cells show from the large breakpoint, two from medium, and one with the next peeking on a phone. The field is a Field with an Input, and the ruled bands come from Guides. The recipes and quantities are made up for the example.
FAQ
How are the quantities rescaled?
Each ingredient types its quantity for the recipe as written (makes servings). For a chosen number of servings the page multiplies by servings over makes, then rounds by kind: g and ml to the nearest 5 (never below 5), count to the nearest half and tsp or tbsp to the nearest quarter. A counted thing picks the singular name at exactly one ("1 lime", "1½ limes").
What does the Servings field accept?
One or two digits from 1 to 24. Typing a valid number rescales at once; typing something else shows "Enter a whole number from 1 to 24." under the field and keeps the last good number in the cells, and leaving the field puts that number back. The minus and plus buttons stop at the ends and say nothing is changed there.
How does it work with a keyboard?
Tab reaches the field, the two step buttons, the dots, Previous and Next. With focus inside the track's panel, the arrow keys move by one cell (mirrored in a right-to-left layout) and Home and End jump to the ends. Typing in the field never moves the track. Cells out of view are hidden from the tab order and from screen readers.
What is announced?
One polite status line under the track says "Servings set to 6. Every quantity was rescaled." after each change, and shows the counter ("Recipes 1–3 of 6") after you move the track by hand.
What stays local in the demo?
Everything. Recipes and quantities are typed in RECIPES and the servings live in state. To wire it for real, load recipes with their quantities and makes from your catalogue, keep the servings in the user's meal plan, and add units or conversions in UNITS and amountOf if you need cups or ounces.