Trello Kanban Board

Cards 318

About

Trello Kanban Board drag and drop material component, project overview tasks boards

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Trello Kanban Board to your project and fits it to your theme.

Code

How Trello Kanban Board is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component, type kanbanColumn } from "@/components/ui/trello-kanban-board";


const simpleColumns: KanbanColumn[] = [
  {
    id: "todo",
    title: "To Do",
    tasks: [
      { id: "1", title: "Create project documentation" },
      { id: "2", title: "Design system components" },
      { id: "3", title: "Set up testing framework" },
    ],
  },
  {
    id: "in-progress",
    title: "In Progress",
    tasks: [
      { id: "4", title: "Build authentication flow" },
      { id: "5", title: "API integration" },
    ],
  },
  {
    id: "done",
    title: "Done",
    tasks: [
      { id: "6", title: "Project setup" },
      { id: "7", title: "Database design" },
    ],
  },
]

export default function DemoOne() {
   return (
    <div className="bg-background p-8">
      <div className="mx-auto max-w-5xl">
        <div className="mb-10 text-center">
          <h1 className="mb-2 text-3xl font-bold text-foreground">Task Board</h1>
          <p className="text-muted-foreground">Drag tasks between columns to update their status</p>
        </div>
        <Component
          columns={simpleColumns}
          columnColors={{
            todo: "bg-indigo-500",
            "in-progress": "bg-amber-500",
            done: "bg-emerald-500",
          }}
          allowAddTask={false}
        />
      </div>
    </div>
  )
}