Shadcn.io is not affiliated with official shadcn/ui
Todo List Recipe
A recipe step checklist block for React and Next.js with ingredient checkboxes, expandable numbered steps, timer indicators, servings adjuster, and prep/cook time display built with shadcn/ui and Tailwind CSS
Follow along with any recipe using this step checklist block for React and Next.js. Features an ingredient section with quantity checkboxes, numbered expandable cooking steps with detailed instructions, timer indicators for steps that need timing, a servings adjuster, and prep/cook time display. Built with TypeScript, shadcn/ui Checkbox, Badge, and Button components, framer-motion staggered entrance animations, and Tailwind CSS. Perfect for cooking apps, meal prep dashboards, and recipe sharing platforms.
Related Components
Shopping Todo List
Categorized grocery shopping list
Workout Todo List
Exercise routine tracker
Reading List Todo
Book tracking with progress
Learning Path Todo
Course progress tracker
Packing Todo List
Travel packing checklist
Event Planning Todo
Event planning with budget tracking
FAQ
Was this page helpful?
Sign in to leave feedback.
Reading List
A reading tracker block for React and Next.js with currently reading highlight, page progress bars, genre badges, star ratings, and want-to-read queue built with shadcn/ui and Tailwind CSS
Recurring
A recurring task todo list block for React and Next.js with repeat schedules, streak counters, and next-due indicators built with shadcn/ui and Tailwind CSS