shadcn.io is not affiliated with official shadcn/ui
Duration Table Methodology Block for Radix UI
A methodology section for an engineering consultancy: a to-scale bar of five phases across six weeks, over a framed table with each phase's work, tools as badges and duration.
Installation
Overview
A methodology section for React with Radix UI, written for Spanwell, a fictional structural engineering consultancy. A band at the top draws the whole job to scale: five segments across six weeks, each as wide as its phase is long, with a week ruler under them. Below it, a framed table says what happens in each phase, which tools it uses, as badges, and how long it takes, with the weeks it covers; the bar and the table read from the same list, so they can't disagree. On a phone the bar keeps only the phase numbers and the table scrolls sideways in a labelled region that a keyboard can reach. It's built from Table, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For consultancies, agencies and any team that has to answer "how long, and what happens when". The phases and weeks are example data.
FAQ
How do I change the phases and their lengths?
Edit PHASES at the top of the file: each has a name, a work sentence, tools and a number of weeks. The total in the heading, the bar's columns (one fraction per week), the "Week 3–4" spans in the table and the ruler's end are all computed from that list, so changing a phase's weeks re-scales everything. Fractions of a week work too; the labels read best in whole weeks.
Is the bar really to scale?
Yes. It's a grid with one column per phase, sized in fractions equal to the weeks, so a two-week phase is exactly twice as wide as a one-week one at any screen width. The ruler under it is drawn as text ("Start", the midpoint, the end) because a tick for every week would crowd a phone.
How is it read by a screen reader?
The bar is an ordered list labelled with the number of weeks, one item per phase with its name and length; the coloured segments and their numbers are decorative. The table is a real table named by its label, with a header row and each phase's name in the first column, so a reader can ask for "Check, tools" and get the answer. The tools are a list inside their cell.
What happens on a phone?
The bar stays whole but shrinks its labels to the phase numbers, which the table explains right below. The table is wider than the screen on purpose, so it scrolls sideways inside its frame; the frame is a focusable region named like the table, so keyboard and switch users can scroll it too. Nothing else moves sideways at 320 pixels.