Roadmap UIRoadmap UI

Kanban

A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".

Planned

AI Scene Analysis

AI Integration

Al

Jun 1 - Dec 26, 2024

Real-time Video Chat

Real-time Collaboration

Di

Sep 1 - Dec 19, 2024

AI-Assisted Video Transitions

AI Integration

Ge

Dec 1 - Jan 31, 2025

Multi-User Permissions

Real-time Collaboration

Ju

Mar 1 - Apr 30, 2025

AI Scene Recommendations

AI Integration

Mi

Jun 1 - Jul 31, 2025

Global CDN Integration

Cloud Migration

Pe

Sep 1 - Oct 31, 2025

AI-Powered Video Summarization

AI Integration

Sa

Dec 1 - Jan 31, 2026

In Progress

Collaborative Editing

Real-time Collaboration

Bo

Jul 1 - Dec 26, 2024

AI Voice-to-Text Subtitles

AI Integration

Et

Oct 1 - Dec 26, 2024

Version Control System

Real-time Collaboration

Ha

Jan 1 - Feb 28, 2025

AI-Powered Audio Enhancement

AI Integration

Ke

Apr 1 - May 31, 2025

Collaborative Storyboarding

Real-time Collaboration

Na

Jul 1 - Aug 31, 2025

AI Object Tracking

AI Integration

Qu

Oct 1 - Nov 30, 2025

Blockchain-based Asset Licensing

Cloud Migration

To

Jan 1 - Feb 28, 2026

Done

AI-Powered Color Grading

AI Integration

Ch

Aug 1 - Dec 26, 2024

Cloud Asset Management

Cloud Migration

Fi

Nov 1 - Dec 31, 2024

AI Content-Aware Fill

AI Integration

Ia

Feb 1 - Mar 31, 2025

Real-time Project Analytics

Cloud Migration

La

May 1 - Jun 30, 2025

AI-Driven Video Compression

AI Integration

Os

Aug 1 - Sep 30, 2025

Real-time Language Translation

Real-time Collaboration

Ra

Nov 1 - Dec 31, 2025

Installation

npx roadmap-ui add kanban

Features

  • Drag and drop features between columns
  • Customize the card contents

Code

kanban.tsx
'use client';
 
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { exampleFeatures, exampleStatuses } from '@/lib/content';
import {
  KanbanBoard,
  KanbanCard,
  KanbanCards,
  KanbanHeader,
  KanbanProvider,
} from '@/components/roadmap-ui/kanban';
import type { DragEndEvent } from '@dnd-kit/core';
import { format } from 'date-fns';
import { useState } from 'react';
import type { FC } from 'react';
 
export const KanbanExample: FC = () => {
  const [features, setFeatures] = useState(exampleFeatures);
 
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
 
    if (!over) {
      return;
    }
 
    const status = exampleStatuses.find((status) => status.name === over.id);
 
    if (!status) {
      return;
    }
 
    setFeatures(
      features.map((feature) => {
        if (feature.id === active.id) {
          return { ...feature, status };
        }
 
        return feature;
      })
    );
  };
 
  return (
    <KanbanProvider onDragEnd={handleDragEnd}>
      {exampleStatuses.map((status) => (
        <KanbanBoard key={status.name} id={status.name}>
          <KanbanHeader name={status.name} color={status.color} />
          <KanbanCards>
            {features
              .filter((feature) => feature.status.name === status.name)
              .map((feature, index) => (
                <KanbanCard
                  key={feature.id}
                  id={feature.id}
                  name={feature.name}
                  parent={status.name}
                  index={index}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex flex-col gap-1">
                      <p className="m-0 flex-1 font-medium text-sm">
                        {feature.name}
                      </p>
                      <p className="m-0 text-xs text-muted-foreground">
                        {feature.initiative.name}
                      </p>
                    </div>
                    {feature.owner && (
                      <Avatar className="h-4 w-4 shrink-0">
                        <AvatarImage src={feature.owner.image} />
                        <AvatarFallback>
                          {feature.owner.name?.slice(0, 2)}
                        </AvatarFallback>
                      </Avatar>
                    )}
                  </div>
                  <p className="m-0text-xs text-muted-foreground">
                    {format(feature.startAt, 'MMM d')} -{' '}
                    {format(feature.endAt, 'MMM d, yyyy')}
                  </p>
                </KanbanCard>
              ))}
          </KanbanCards>
        </KanbanBoard>
      ))}
    </KanbanProvider>
  );
};

Subcomponents

The Kanban component is made up of the following subcomponents:

KanbanProvider

The KanbanProvider component is the root component of the Kanban board. It contains the drag-and-drop context and provides the necessary context for the other components.

PropTypeDefault
children
ReactNode
-
onDragEnd
(event: DragEndEvent) => void
-
className
string
-

KanbanBoard

The KanbanBoard component is a container for the columns of the Kanban board.

PropTypeDefault
id
string
-
children
ReactNode
-
className
string
-

KanbanHeader

The KanbanHeader component is a container for the column headers of the Kanban board.

PropTypeDefault

KanbanCards

The KanbanCards component is a container for the cards of the Kanban board.

PropTypeDefault
children
ReactNode
-
className
string
-

KanbanCard

The KanbanCard component is a single card in the Kanban board.

PropTypeDefault
id
string
-
name
string
-
index
number
-
parent
string
-
children
ReactNode
-
className
string
-

On this page