shadcn.io is not affiliated with official shadcn/ui
Due Dates Stepper Block for React
A house sale with five steps whose due dates are read against a fixed day, each saying Overdue by 3 days or Due in 5 days, with a Reschedule date field that recomputes the rail and the overdue count.
Installation
Overview
Keep a deadline-driven job honest with this due-date stepper for React with Base UI. A plus-marked frame holds a Steps rail at the start with the five steps of a house sale (Offer accepted, Survey, Searches, Exchange and Completion), each with a glyph and words for its due date: "Overdue by 3 days", "Due in 5 days", "Due today" or "Done". A heading row over the rail counts how many steps are overdue. The open step's panel has a Data List with its date in a time element and the same words, and a Reschedule Field with a date Input: pick another day and the words, the rail and the count follow at once. "Mark done" is the block's one Shine Button. The last step ends on "Sale complete in this demo". Every date is read against a fixed day, 9 Oct 2026, so the block looks the same whenever you open it. For conveyancing, onboarding with deadlines, permits and launch checklists.
FAQ
What day are the dates counted from?
A fixed one: AS_OF at the top of the file is 2026-10-09, and daysFrom works out whole days between that and each date from UTC midnights, so there is no clock and the server and browser always agree. To count from today in your app, set AS_OF after mount (for example from new Date().toISOString().slice(0, 10) in an effect) and show dashes until then, so the first render matches the server.
What makes a step overdue?
A step that is not finished and whose date is before AS_OF. It is shown by a circle-alert glyph, heavier type and the words "Overdue by 3 days", never by a colour, so it reads in any theme. Steps before the open one read "Done" with a check. The heading row counts only steps still to do, so finishing an overdue step lowers the count.
How does Reschedule work?
Pressing a day in the date field calls reschedule, which replaces that step's ISO date in state. The status line says what it came to, for example "Searches: due in 11 days". Clearing the field keeps the old date and asks for a new one. Steps already done have the field disabled, because moving a finished step's date would change history.
How does the keyboard work?
The rail is one tab stop on the current step. Up and Down move between the steps you have reached, Home and End jump to the ends, and Enter or Space opens the focused step and moves focus to its heading. Tab then goes on to the date field and the buttons. Back is always free; later steps open once you have reached them.
What stays local, and how do I save it?
The dates and the current step live in component state and are lost on reload; nothing is sent to a solicitor or a calendar. To keep them, write the dues array against the sale in reschedule and load it into the initial state.
Does it work right to left and on a phone?
Yes. The rail and the divider switch sides, the line sits on the circles' centre in both directions, and the words are wrapped so "Due in 5 days" stays whole. On a phone the rail stays vertical above the panel, with each step's due words visible, and the date field follows it.