shadcn.io is not affiliated with official shadcn/ui
Gantt Timeline FAQ Block for React Aria
A FAQ for a home-buying agency that opens with the purchase drawn as a Gantt: one bar per phase on an eight-week scale, above seven questions that each answer a row.
Installation
Overview
A Gantt timeline FAQ for React with React Aria. A start-aligned title and sentence sit over a framed card with corner marks that draws the home purchase as a Gantt: five rows, offer, inspection, appraisal, mortgage and closing, each a bar on an eight-week scale, so you can see the mortgage running alongside the inspection and the appraisal. Seven questions follow in hairline rows under a rule that runs rail to rail, and the five that answer a row carry a badge with its weeks, such as "Weeks 2 to 6". The bars, the text alternative, the caption and the badges all come from one typed table. On a phone the labels shorten and the weeks compress, the bars keeping their order. It's built from Accordion, Badge and Guides, with plain CSS grid for the bars and your theme's tokens for every colour. For agencies, builders, onboarding flows and any service where one process has overlapping stages.
FAQ
How do I change the phases and the scale?
Edit PHASES at the top of the file: each phase has an id, a label, the week it starts in (start, counting from 1) and how many weeks it runs (span). The scale ends with the last phase, so adding a phase that runs to week 10 widens the grid to ten columns. The bars are grid items placed by two CSS variables, and the week lines are a background on each row, so nothing is measured in code.
What do screen readers hear for the chart?
The card is one image with a text alternative built from PHASES: "A timeline of the purchase over 8 weeks: offer in week 1, inspection in week 2, appraisal in weeks 3 to 4, mortgage in weeks 2 to 6 and closing in weeks 7 to 8." The drawing itself is hidden from assistive technology, and the same weeks appear as text in each question's badge and in the caption below the card.
What about right-to-left layouts?
A timeline reads from the first week to the last in every language, so the card keeps its left-to-right order in right-to-left layouts, like a chart or a time series. The title, the questions and the badges follow the page's direction.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found". One answer is open at a time.
How does it work with a keyboard?
Each question is a button inside its own h3 under the section's h2; Tab moves between them and Enter or Space opens one. The timeline has nothing to operate, so it has no tab stops.
How does it fit on a phone?
Below the sm breakpoint the row labels drop their week text and the label column narrows, so the eight weeks still fit at 320 pixels with the bars in the same order; the weeks remain in the badges and the text alternative. The first question starts well inside the first screen.