Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Recipe Steps Task List Block for React

A cook-along recipe with a servings stepper that scales every ingredient, tick boxes for ingredients and steps, prep and cook times, and one countdown timer you start from a timed step.

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

Cook from one screen, with this recipe checklist block for React with Base UI. A frame in two cells holds the ingredients at the start and the steps at the end. A servings stepper from 2 to 12 rescales every quantity from the amounts written for four, using fractions for spoons and counts and whole grams and millilitres for the rest. Ingredients and steps each have a Checkbox and a running count, and a list shows prep time, cook time and the servings. A timer chip on a timed step sets the one Timer under the steps to that step's time; it counts down only when you press Start, supports Pause, Resume and Reset, runs one step at a time and says "Timer done" in the status line when it ends. Guides rule the cells. For recipe sites, meal-kit apps and any checklist with times and scaled amounts.

FAQ

How are quantities scaled?

Each ingredient stores its amount for four servings. The block multiplies by the chosen servings, divides by four and rounds: to the nearest eighth for spoons and counts, shown as ⅛ to ⅞, and to a whole number for grams and millilitres. Add an ingredient by giving it a per4 amount, a step (8 for eighths, 1 for whole units) and a unit.

Do cooking times change with servings?

No. The steps keep their times, because a larger pot takes about as long to simmer. The foot says so. If your recipe needs longer times for bigger batches, make minutes a function of the servings.

How does the timer behave?

Pressing a chip such as "8:00 timer" selects that step and resets the timer to its time; it never starts by itself. Start, Pause, Resume and Reset are the Timer's own controls, and choosing another chip replaces the current timer. The status line speaks only when the timer is set, started, paused, reset or done, not every second.

What stays local, and how do I save for real?

Servings, ticks and the timer live on the page and reset on reload. In your app keep the ticked ids per cook session in your own store, and read the recipe from your data instead of the INGREDIENTS and STEPS constants.

How does it look on a phone?

The ingredients stack above the steps, each in a full-width band with the timer last. Chips and buttons wrap onto a second line rather than overflow.

All 100 todo list blocks