shadcn.io is not affiliated with official shadcn/ui
Recipe Steps Timeline Block for Radix UI
A roast dinner for six as nine steps with ingredients, where a Serve at select works every start time backwards and steps that overlap say what they run alongside.
Installation
Overview
Plan a dinner backwards from the time you sit down with this recipe steps timeline for React with Radix UI. It is written for Backtime, a fictional meal planner. A hairline frame with a plus mark on each corner holds a band with a "Serve at" select (18:30, 19:00, 19:30 or 20:00) and the first action of the evening, over a vertical rail of nine steps in a real ordered list. Each step has its start time at the start of the row, its length, its ingredients as small tags and, where two steps overlap in time, a line like "Runs alongside Heat the oven". Changing the serve time moves every start time and the first action; the steps and their order stay put. The times are worked out from each step's length and how long before serving it ends. It is built from Select, Badge and Guides with CSS for the rail. For cooking, event run sheets and any plan that has to land on a time. The menu is an example.
FAQ
How do I change the steps?
Edit STEPS at the top of the file: a title, its length in minutes, how many minutes before serving it ends in before, and its ingredients. Start times and the overlap lines are derived, so keep the list in the order the steps start.
How do I change the serve times?
They live in SERVE_TIMES, written as HH:MM. Every start time is the serve time minus the step's before and length, shown on a 24-hour clock.
What stays in the page?
The serve time. Nothing is saved, sent or set as an alarm. To make it real, add reminders in your own app from the same start times.
How is an overlap found?
Two steps overlap when each starts before the other ends, in minutes before serving. The line names the step that shares the most minutes with this one.