shadcn.io is not affiliated with official shadcn/ui
Product Roadmap Dashboard Block for React
Four phases on a vertical timeline, each a collapsible band with its quarter, a percentage and a status word, where ticking a deliverable updates the phase, its node and the overall bar.
Installation
Overview
Show where a product is going and tick things off as they ship, with this roadmap panel for React with Base UI. A hairline frame with a plus mark on each corner holds four Quarterlark phases (Foundation, Core, Growth and Scale) on a vertical rail. Each phase is a Collapsible band with its quarter, how many deliverables are done, a percentage and a status word (Completed, In progress or Planned), all worked out from its deliverables. Open a phase and tick a Checkbox: the phase, its node on the rail and the Overall bar in the foot follow. A deliverable past its due day and not done says "Overdue". It's built from Collapsible, Checkbox, Label and Guides. For product pages, investor updates and planning reviews.
FAQ
How do I fill it with my own roadmap?
Edit PHASES: each has a name, a quarter and a list of deliverables with an id, a title and an ISO due day. DONE_AT_START lists the deliverables already done and OPEN_AT_START the phases that start open. The percentages, counts, status words and the Overall bar are worked out from them.
How is Overdue decided?
A deliverable that is not done and whose due day is before the fixed AS_OF date says Overdue, with a warning icon and the words. The page never reads the clock, so it looks the same on every day; in your app compare with today's date after mount.
How do I use it with the keyboard?
Each phase heading holds one button that opens and closes it with Enter or Space. Inside, every deliverable is a labelled checkbox you tick with Space. The foot announces what changed and the phase's new percentage.