shadcn.io is not affiliated with official shadcn/ui
Meal Prep Planner Kanban Block for React Aria
A six-column dinner planner (Ideas, then Monday to Friday) of ten recipes with a shopping list derived from the planned days and a pantry, so every move changes what there is to buy.
Installation
Overview
Plan the week's dinners and see what to buy with this meal prep board for React with React Aria. A hairline frame with a plus mark on each corner holds six columns, Ideas and then Monday to Friday, and ten recipes, each with its prep time and its ingredients. Recipes in a weekday are planned and Ideas are not, and the shopping list under the board is worked out from the planned recipes: every ingredient they need that the pantry does not hold, once, with how many dinners use it ("onions x2"). Dragging a recipe into a day adds its ingredients to the list and sending it back to Ideas takes them off, and the sentence under the heading and the status line say how many things there are to buy. The list sits in a held, scrollable region, so the page never changes height. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". Reset restores the week. On a phone the columns scroll sideways in one named region. For meal planners, menu boards and any plan that feeds a list.
FAQ
How do I fill it with my own recipes?
Edit COLUMNS, PANTRY and START. A recipe has an id, the column it starts in, a title, its minutes and its items, the ingredients as short words. Whatever is in PANTRY never reaches the list; the rest is calculated.
How is the shopping list worked out?
shoppingOf takes the recipes outside Ideas, flattens their ingredients, drops the ones in PANTRY, counts each name once with how many recipes use it and sorts the names. The board, the header and the status line all read that one result, so they cannot disagree.
Why does the list scroll instead of growing?
So that moving a recipe never pushes the foot or the page around: the list region has a fixed height with its own scroll, and it is reachable with the keyboard. When nothing is left to buy it says so in the same space.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card and says so in the status line. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.