Kanban roadmaps use status columns, task cards, and StatusIndicator dots. The roadmap task bundle and Roadmap1 Pro block are the gold reference for agents and humans.
What this pattern covers
Product roadmaps, release boards, and sprint kanbans share the same structure:
A page title and optional product grouping
Horizontal status columns (Planned, In progress, Done, Blocked)
Task cards with title, description, assignee, and status dot
Optional links on cards when tasks have detail pages
Gold reference: packages/core/ai/tasks/roadmap.json → examples/blocks/Roadmap1.tsx.For agents: resolve intent to the roadmap bundle, load component slices for Card, StatusIndicator, User, and Scroller, then read Roadmap1 before generating.
Data shape
Model roadmap data as nested arrays — products, then columns, then tasks:
Define a task lookup object for status colors:Pass task[taskItem.type].color to StatusIndicator and task[taskItem.type].label to a Text label beside it.
Column layout
Each status column is a static surface panel — not a Card:Wrap all columns in a horizontal Row with overflowX="auto" and gap="4" so narrow viewports scroll sideways.
Static task (no link): swap Card for a Column with the same surface props (border, background, radius, padding).
StatusIndicator on tasks
Place a StatusIndicator dot beside the type label in the card footer Row. Use semantic colors from your task lookup — brand for in-progress, success for done, danger for blocked, neutral for planned.
Set ariaLabel when the color alone does not convey meaning (e.g. ariaLabel="Blocked").
Assignee row
When a task has a user field, render a User row in the card footer with avatarProps={{ size: "s", src, empty: !src }} and the name in a label Text child.
Keep assignee and status on one Row with horizontal="between" so they align on opposite sides.
Product header
For multi-product roadmaps, add a product stripe before each column group:
The data-brand attribute ties the stripe to your product's scheme token.
Horizontal scroll on mobile
When columns overflow, wrap them in Scroller (direction row) for prev/next buttons and edge fades — or use a plain Row with overflowX="auto" for a simpler layout.
Roadmap1 uses overflowX="auto" directly. Upgrade to Scroller when you want arrow buttons and fade hints.
Write this / not this
✅ Once UI way
❌ Common mistake
Card only when `href` or `onClick` exists
Card for every task
Column surface for status lanes
Nested Cards for columns
StatusIndicator + label Text
Raw colored divs
`task` lookup for consistent colors
Inline hex colors per card
Check yourself
Columns use static Column panels, not Card
Only linked tasks use Card with href
Status colors come from a shared lookup object
Horizontal layout scrolls on narrow screens
Agents loaded roadmap.json and Roadmap1 before codegen
