shadcn.io is not affiliated with official shadcn/ui
Gantt Inspired Timeline Block for Radix UI
A launch plan of nine tasks on a ten-week proportional axis with bars sized by their dates, a today line, a Toggle Group that relabels the axis by week, fortnight or month, and a band with the owner, dates, progress, dependencies and slack of the chosen bar.
Installation
Overview
Plan a launch where the length of a bar is the length of the work, with this gantt inspired timeline for React with Radix UI. It is written for Barline, a fictional project planner. A hairline frame with a plus mark on each corner holds nine tasks over ten weeks, one row each, with the task names in a sticky first column and the bars on a shared time axis. A bar starts and ends on its dates; the part that is done is solid and the rest is pale, so overlaps and late work show at a glance, and a hairline marks today. A Toggle Group in the header, "Label the axis by", switches the axis between every week, every second week and every month and sets how wide the chart is. Each bar is a button named with its task, dates and progress, and pressing it opens a band under the chart with the owner, the dates, the percent done, what the task starts after and its slack, worked out from the typed dates. The chart scrolls sideways in a named region on a phone while the names stay put. It is built from Toggle Group, Avatar and Guides, with an entrance only. For launch plans, project schedules and any list of work that overlaps in time. The plan is example data.
FAQ
How do I change the tasks or the weeks?
Edit TASKS at the top of the file. Each has an ISO start and end (the last day of work), a done percentage, an owner and the ids it comes after. Bars, slack and the footer counts are derived. To change the span, change FIRST_DAY and WEEKS and the tick lists; positions are percentages of the span, so the bars follow.
What does the zoom change?
The axis labels and the least width of the chart: a week per label, a fortnight per label or a month per label. The bars keep their dates and their share of the span, so nothing moves in time, and the chart stretches to the panel when it fits.
How is slack worked out?
It is the number of days between the end of a task and the earliest start of any task that comes after it, so a task that ends on a Friday with a successor starting on Monday has 2 days. A task nothing follows reads "None, nothing follows". Slack here is calendar days, not working days.
What stays in the page, and how do I wire a real plan?
The chosen zoom and the chosen task are local state, and nothing is saved or sent. For a real plan, pass tasks in the same shape from your data and keep AS_OF as the date of your data, so the today line, the counts and the sentences read the same on the server and in every browser.
Is it accessible, and does it work in a right-to-left page?
Each bar is a native button with a full name and aria-pressed, the list of tasks is an ordered list and the chart region has a name. A polite status line, hidden visually and there from load, says what was chosen. The time axis does not mirror in Arabic or Hebrew, so earlier weeks stay at the start of the chart as in any chart; the text around it follows the page.