shadcn.io is not affiliated with official shadcn/ui
Construction Phases Timeline Block for React
Six phases of a house build on a rail with a progress ring each, planned and forecast finish dates with the slip in days, and checkboxes for every task that move the ring, the counts and a totals band.
Installation
Overview
Follow a build from the footings to the handover with this construction phases timeline for React with Base UI. It is written for Sitebook, a fictional site-progress tool. A hairline frame with a plus mark on each corner holds a band of three figures (tasks done, phases finished and the forecast handover with its slip) over a vertical rail of six phases: Groundworks, Frame, Roof, Services, Fit-out and Finish. Each phase has a progress ring at the rail, the count of tasks done, the planned and forecast finish and the slip in words ("7 days late"). A phase opens in place to its tasks, each with a checkbox; ticking one moves the ring, the count, the band and the status line, and ticking the last task marks the phase finished. It is built from Collapsible, Checkbox, Circular Progress and Guides. For building sites, fit-outs, renovations and any plan made of phases with checklists. The dates and tasks are example data.
FAQ
How do I change the phases and tasks?
Edit PHASES at the top of the file: each phase has an id, a name, a planned finish (plan), a forecast finish (finish) and its tasks, each with an id, a name and whether it starts ticked. The slip, the counts, the rings and the handover figure are all derived from those fields.
What stays in the page?
Which tasks are ticked and which phases are open. Nothing is saved or sent, and the status line says so. To make it real, load the task states from your site system and save each tick from the checkbox handler.
Does ticking a task change the forecast finish?
No. The forecast dates are typed data, as they would come from a site manager. Ticking only moves the rings and counts. To move dates as work finishes, derive finish from your schedule instead of typing it.
Does the panel jump when I open a phase?
The dates line reserves its room, so only the opened phase grows in place and everything below it moves down by that amount. Closing it puts the rail back.