# Dashboard Roadmap View

Product roadmap with now, next and later lanes and draggable initiative cards.

- id: `dashboard-roadmap-view`
- Page: https://agentic-ui-kit.com/components/dashboard-roadmap-view
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-roadmap-view

## Install

```bash
agentic-ui add dashboard-roadmap-view
npx shadcn@4.17.0 add @agentic-ui/dashboard-roadmap-view
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** now-next-later-lanes, card-dragging, cross-lane-moves, in-lane-reordering, keyboard-dragging, keyboard-move-shortcuts, drag-overlay, capacity-limits, effort-totals, confidence-indicator, text-filter, tag-filter, controlled-or-uncontrolled, read-only-mode, loading-state, error-state, empty-state
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, saas, operations, analytics, personal-productivity
- **Interaction:** drag-and-drop, keyboard-navigation, filter, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product roadmap with now, next and later lanes and draggable initiative cards, Team planning board where items move between this sprint, next sprints and backlog, Internal roadmap with capacity limits per horizon and effort totals, Read-only roadmap shared with customers, filtered by theme tag
- **Avoid when:** Work needs dates, durations or dependencies (use a Gantt or roadmap timeline), Items flow through many workflow statuses such as todo, review and done (use a kanban board), Customers vote on public feature requests (use a public roadmap with voting)
- **Preserve when adapting:** lane-model, single-commit-move-callback, keyboard-contract, state-triad-loading-error-empty
- **Replace when adapting:** domain-copy, lane-names-and-horizons, capacity-limits, effort-unit
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input, select, skeleton
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives