shadcn.io is not affiliated with official shadcn/ui
Thick Rail Timeline Block for React
Ten weeks of a team's booked hours on a rail whose thickness is the load in four steps, with a capacity slider from 30 to 50 hours that redraws every week and counts the weeks over capacity.
Installation
Overview
Let the width of the line be the workload with this thick-rail timeline for React with Base UI. It is written for Weekload, a fictional team-resourcing tool. A hairline frame with a plus mark on each corner holds ten weeks of a platform team's booked hours on a vertical rail. The segment for each week is 2, 6, 10 or 14 pixels wide for light, steady, full or over capacity, with a thin arm to the week, the hours booked against the capacity ("44 of 40 h") and a word; a week over capacity says "Over by 4 h". At the end, a slider sets the capacity per week from 30 to 50 hours. Moving it redraws every thickness, rewrites "Over capacity in 3 weeks." and updates the totals and the busiest week, and the four thicknesses are shown in a key under it. On a narrower screen the slider sits above the rail. It is built from Slider and Guides with CSS for the rail. For staffing, sprint load, support queues and any series where how much matters more than when. The hours are example data.
FAQ
How do I change the weeks?
Edit WEEKS at the top of the file: an id, the ISO day of the Monday in start and the booked hours. The totals, the busiest week and the over-capacity count are derived. Change the slider's range with min and max on the Slider.
How do I change the thickness steps?
They live in TIERS: a literal width class for the rail, a literal height class for the key's sample, a word and a range. levelOf() picks the step from the hours and the capacity in whole numbers: over 100 percent, 90 to 100, 60 to 89 and under 60. Keep the classes literal so Tailwind sees them.
What stays in the page?
The capacity. Nothing is saved or sent. To make it real, store each team's capacity and load the weekly bookings from your planning data.
Does the panel change height when I move the slider?
No. Every week is a row of one fixed height, and the sentence and the status line reserve their lines, so only the width of the rail and the words change.