Back to components
ComponentBoardFree
Roadmap Board React component
A quarterly product roadmap grouped by team, with initiative editing, status filters, progress tracking and quarter reassignment.
About the Roadmap Board component
A quarterly product roadmap grouped by team, with initiative editing, status filters, progress tracking and quarter reassignment.
When to use it
Plan initiatives by team and quarter.
Track delivery progress without a detailed daily schedule.
Installation
Add the Roadmap Board component to your project with the shadcn CLI. It lands in components/roadmap-board.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/roadmap-boardOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<RoadmapBoard /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "The next chapter." |
| theme | "dark" | "light" | "dark" |
| initialItems | RoadmapInitiative[] | initial |
| onItemsChange | (items: RoadmapInitiative[]) => void | — |
| className | string | — |
- titlestringDefault: "The next chapter."
- theme"dark" | "light"Default: "dark"
- initialItemsRoadmapInitiative[]Default: initial
- onItemsChange(items: RoadmapInitiative[]) => void
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Roadmap Board FAQ
- How do I move an initiative?
- Open its card and change its quarter, team, status or progress. Marking it shipped sets progress to 100%. New initiatives start in Product, Q2, with Planned status. Use onItemsChange for persistence.
