shadcn.io is not affiliated with official shadcn/ui
Construction Timeline Calendar Block for Ark UI
Six build phases as bars on a 20-week ruler, each with a trade select whose availability date shifts that phase and every phase after it, with the wait in words and the finish date worked out again.
Installation
Overview
Plan a build around the trades who can actually turn up, with this construction timeline for React with Ark UI. A hairline frame with a plus mark on each corner holds three figures (when the build finishes, how many days it is against plan and how many days it spends waiting on trades) over a ruler of 20 weeks from Monday 19 October 2026. Each of the six phases (Foundation, Framing, Roof, Services, Drywall and Finishes) is a row with its name, its dates, a native select of the trades who could do it and a solid bar for the work. Every trade has a typed date it is free from, so choosing one that is free after the phase's planned start moves that phase, and every phase after it, to the later date: a hatched stretch shows the wait, a dashed outline keeps the planned place, and the row says it in words ("Waits 6 days for Electricians"). Reset to plan puts every phase back. The ruler scrolls sideways under the phase names on a phone, and a polite status line says what moved. It's built from Button, Native Select and Guides, with a CSS entrance only. For contractors, site managers and any plan where who is free decides when work can start.
FAQ
How do I fill it with my own phases and trades?
Edit PHASES and PROJECT_START. Each phase has a name, a length in days and a list of trades, and each trade has a label and the ISO date it is free from. The first trade in each list is the plan. Every date, the bars, the waits and the finish are worked out from those lists with UTC date arithmetic, so there is nothing else to keep in step.
How does choosing a trade move the dates?
A phase starts on the later of two days: the day the phase before it ends and the day its trade is free. If the trade is free earlier, nothing changes. If it is free later, the phase starts then, the days in between are shown as a wait, and every phase after it starts from the new end. The finish date and the days against plan follow.
Why are the bars hatched, dashed or solid?
Colour alone can't carry meaning for everyone, so the three states are three drawings: solid for work, hatched for waiting on a trade and a dashed outline for where the phase was planned. A key under the ruler names each, and the same facts are in the text of every row.
How do I use it without a mouse?
Each select is a native one, so it opens and changes with the keyboard of your browser and system. The ruler is a labelled scroll region that you can focus and move with the arrow keys, and the Reset button and the selects keep the order they have on the page.
What stays local, and how do I wire it up?
Everything. The trades, their dates and the choices are typed or held in the page, and nothing is saved or sent. To make it real, load each trade's availability from your scheduling system, keep the selected trade for each phase in your own store, and leave the date arithmetic as it is.