Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kanban blocks

Pro

Meal Prep Planner Kanban Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Plan the week's dinners and see what to buy with this meal prep board for React with Radix UI. 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.

What stays in the demo?

Everything: the plan lives in the component's state, nothing is ordered, saved or synced, and a reload or Reset restores the starting week. To keep it, post to your API from put, and send the list from shoppingOf to your grocer. The recipes are made up.

All 100 kanban blocks