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".

Installation

npx love-ui@latest add kanban

Usage

import { KanbanProvider, KanbanBoard, KanbanHeader, KanbanCards, KanbanCard } from "@/components/kanban"

<KanbanProvider items={items} columns={columns}>
  {columns.map((column) => (
    <KanbanBoard key={column.id} id={column.id}>
      <KanbanHeader>{column.name}</KanbanHeader>
      <KanbanCards column={column.id}>
        {(item) => <KanbanCard key={item.id} {...item} />}
      </KanbanCards>
    </KanbanBoard>
  ))}
</KanbanProvider>

Features

Drag and drop features between columns
Customize the card contents

Examples

Simple version

Planned

Architect ubiquitous AI

Incubate end-to-end infrastructures

Harness cutting-edge users

Incubate enterprise niches

In Progress

Evolve cross-media architectures

Simplify plug-and-play ROI

Scale magnetic technologies

Strategize cross-platform web services

Facilitate impactful platforms

Deliver innovative ROI

Harness interactive lifetime value

Done

Utilize mission-critical methodologies

Collaborate efficient e-commerce

Monetize dynamic partnerships

Expedite value-added methodologies

Mesh rich platforms

Enable out-of-the-box supply-chains

Target scalable content

Syndicate sustainable infrastructures

Implement holistic smart contracts

"use client";

import { faker } from "@faker-js/faker";
import type { DragEndEvent } from "../../../../../packages/kanban";
import {
  KanbanBoard,
  KanbanCard,
  KanbanCards,
  KanbanHeader,
  KanbanProvider,
} from "../../../../../packages/kanban";
import { useState } from "react";

// Seed faker to ensure consistent data between server and client
faker.seed(123);

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

const columns = [
  { id: faker.string.uuid(), name: "Planned", color: "#6B7280" },
  { id: faker.string.uuid(), name: "In Progress", color: "#F59E0B" },
  { id: faker.string.uuid(), name: "Done", color: "#10B981" },
];

const users = Array.from({ length: 4 })
  .fill(null)
  .map(() => ({
    id: faker.string.uuid(),
    name: faker.person.fullName(),
    image: faker.image.avatar(),
  }));

const exampleFeatures = Array.from({ length: 20 })
  .fill(null)
  .map(() => ({
    id: faker.string.uuid(),
    name: capitalize(faker.company.buzzPhrase()),
    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),
    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),
    column: faker.helpers.arrayElement(columns).id,
    owner: faker.helpers.arrayElement(users),
  }));

const Example = () => {
  const [features, setFeatures] = useState(exampleFeatures);

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (!over) {
      return;
    }

    const status = columns.find(({ id }) => id === over.id);

    if (!status) {
      return;
    }

    setFeatures(
      features.map((feature) => {
        if (feature.id === active.id) {
          return { ...feature, column: status.id };
        }

        return feature;
      })
    );
  };

  return (
    <KanbanProvider columns={columns} data={features} onDragEnd={handleDragEnd}>
      {(column) => (
        <KanbanBoard id={column.id} key={column.id}>
          <KanbanHeader>{column.name}</KanbanHeader>
          <KanbanCards id={column.id}>
            {(feature) => (
              <KanbanCard
                column={column.name}
                id={feature.id}
                key={feature.id}
                name={feature.name}
              />
            )}
          </KanbanCards>
        </KanbanBoard>
      )}
    </KanbanProvider>
  );
};

export default Example;

Gantt List