shadcn.io is not affiliated with official shadcn/ui
Gantt Roadmap About Block for Vue
A Now, Next and Later roadmap for planning software: three horizon columns, three lanes, and initiatives as bars that span the columns they cover, each with a progress fill.
Installation
Overview
A roadmap for Vue with Ark UI, written for Lookahead, a fictional planning tool. It is drawn as a Gantt over three horizons rather than a kanban: the columns are Now, Next and Later, and the rows are three lanes (Plans, Teams, Connections). Each initiative is a bar that sits in the columns it spans, so one that has started in Now and will finish in Next reaches across both, and it carries a short sentence, a progress fill and how far along it is in words. Column hairlines run through every lane and the lanes are ruled from rail to rail, ending the block. On a phone the board becomes a stack: each lane's name above its bars, every bar the full width, with its horizons written out in a badge. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Progress and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, investor updates and any product page that wants to say where it is going and how far it has got. The initiatives and the percentages are example data.
FAQ
How do I change the lanes, the bars and where they sit?
The lanes are LANES at the top of the file. Each lane has bars, and each bar has a title, a sentence, the horizons it spans in words (horizon), its progress from 0 to 100 and a place: the Tailwind classes that put it on the board from md up (md:col-start-1 md:col-span-2 for a bar over Now and Next). Bars in one lane that don't overlap share its row; add md:row-start-2 to a bar that needs a second row. The three horizons are HORIZONS.
What does a bar spanning two columns mean?
That the work has started in the first horizon and will finish in the second. Its progress fill says how much of the whole bar is done, and its badge spells the span out ("Now to Next") so the meaning never depends on position. A bar in Later with 0% is simply not started.
How is it read by a screen reader?
Each lane is a section with an h3, each bar is a list item with an h4, and the horizons on the board's header are an ordered list that disappears on a phone, where the badges say the same thing. The progress fill is decorative: the percentage next to it, or "Not started", is the text. Nothing is conveyed by colour.
How is this different from the kanban roadmap in the features blocks?
That one moves cards between status columns. This one is about time: three horizons across, lanes by theme down, and bars that stretch across the horizons they cover, with their progress shown. It is static and ends the page's about section with the plan, not a board to work in.
How does it fit on a phone?
Below md the three columns and their hairlines are dropped and each lane stacks its bars in one column, full width, under the lane's name and note. A bar's badge keeps the horizons it spans, so a reader still sees when it lands. Nothing scrolls sideways at 320 pixels, and the percentages keep their order in a right-to-left layout.
What moves, and what happens with reduced motion?
The header and the board fade up once on load with CSS transitions, and the progress fills ease to their width. With reduced motion the entrance is off and the block simply appears. There is no script and nothing else moves, so the block can render on the server.