shadcn.io is not affiliated with official shadcn/ui
Product Roadmap Timeline Block for Vue
Eight initiatives across four quarters with the commitment drawn as line style, solid, dashed or dotted, a bell toggle to follow each one, and a grouped list on phones.
Installation
Overview
Show how firm each plan is with this product roadmap timeline for Vue with Ark UI. It is written for Wayfinder, a fictional product-planning tool. A hairline frame with a plus mark on each corner holds a quarter axis from Q4 2026 to Q3 2027 with a first column of eight initiatives that stays in place while the chart scrolls sideways, and a line for today. Each initiative is a chip across the quarters it spans, and the line style is the promise: solid for committed, dashed for planned, dotted and lighter for exploring, always with the word. A bell toggle follows an initiative and the foot says "You follow 2 initiatives". On a phone the axis becomes a list grouped by the quarter each initiative starts in. It is built from Toggle, Avatar and Guides with CSS for the chips. For product planning, public roadmaps and any plan where some items are firmer than others. The initiatives are example data.
FAQ
How do I change the initiatives?
Edit ITEMS at the top of the file: a name, an owner, commit (committed, planned or exploring), from (the first quarter, 1 to 4) and len (how many quarters). Edit QUARTERS to move the axis.
How do I change the line styles?
They live in lineOf(): solid, dashed and dotted borders with a tint. Keep the classes literal so Tailwind sees them, and keep the word in the chip, since line style alone is not enough for everyone.
What stays in the page?
Which initiatives you follow. Nothing is saved or sent, and no notification is made. To make it real, store a follow per person and initiative and send updates from your own service.
Does the axis flip in Arabic or Hebrew?
No. Like any chart on a time axis it keeps its direction; the first column and the text around it follow the page direction.