Reading the Roadmap Block
A roadmap tells users and stakeholders what a product team has done, is doing, and plans to do. This block expresses that as a full page status board with four columns: Completed, In Progress, Planned, and Future. Each column has a color coded header with an icon and an item count, and each roadmap card inside carries a quarter badge, a title, a description, a progress indicator, and a checklist of deliverables with per item done states.
Because status is encoded in both position and color, a visitor can read the shape of your plans in seconds before diving into any single card.
Public Roadmaps and Internal Planning
SaaS products publish pages like this to show momentum and collect feedback on planned work, usually linked from the footer next to a changelog page that covers what already shipped. Open source projects use the same board to coordinate contributors.
Internally, the block works as a planning artifact for quarterly reviews and all hands decks. If your story is more chronological than status based, the timelines category offers a complementary presentation of the same information.
Cards, Badges, and Lucide Icons
The implementation is deliberately lean: a React and TypeScript page composed from the Shadcn UI Card and Badge components, Tailwind for layout, and the cn helper for conditional classes. Column icons, the rocket, sparkles, clock, and check marks, come from Lucide.
All roadmap content is a typed data structure at the top of the file, with each item declaring its status, quarter, progress, and deliverable checklist. There is no client state at all, so the page can render on the server and update whenever your data source changes.
Keeping Status Colors on Token Rails
The four status colors are defined as Tailwind class pairs with explicit dark variants, so completed green and planned amber remain distinguishable in dark mode instead of washing out. Everything that is not status colored uses the standard tokens, bg-card, borders, and text-muted-foreground, from your globals.css.
Rebranding is therefore a two step edit: retune the token variables for the base look, and adjust the four status class pairs if your product uses different semantic colors. Column count and ordering are plain markup changes.
Adding It to Your Product Site
The shadcn CLI command at the top of the block page installs it into your project, with npm, pnpm, yarn, and bun variants, or you can copy the single page file from the code tab. The roadmap is a pro block, so code access and CLI install unlock with the All Access plan.
It is available in React, Vuejs, and Svelte versions, the Vuejs and Svelte editions built on the shadcn-vue and shadcn-svelte ports. To keep the roadmap honest over time, source the items from a CMS, a JSON file in your repo, or your issue tracker's API, and map them into the block's status groups. The board rendering, colors, and responsive columns are already solved.