Roadmap board
The public roadmap as a three-column kanban: drag a card between Planned, In progress and Completed, watch the target column light up, the lists reflow and the counts roll, or move it from the ⋯ menu with the keyboard.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { RoadmapBoard } from '@/components/component-kit/items/block-roadmap-board';
export function Example() { return <RoadmapBoard onMove={(id, from, to) => console.log(id, from, to)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | RoadmapColumn[] | Planned / In progress / Completed | Columns to render: { id: RoadmapStatus; title: string; dotClassName: string }. |
items | RoadmapItem[] | 7 demo items | Initial cards: { id, title, type: 'feature' | 'bug' | 'improvement', status, author: { name, initials }, votes }. |
onMove | (id: string, from: RoadmapStatus, to: RoadmapStatus) => void | undefined | Called after a card is moved by drag or from the ⋯ menu. |
density | "default" | "compact" | "default" | Compact tightens padding and type and defaults to two columns with one card each. |
autoPlay | boolean | density === "compact" | Idle loop that shuttles a card between the first two columns every 2.4s; skipped under reduced motion. |
contentClassName | string | undefined | Class for the portalled Move-to menu. |