New

KanbanColumn

Kanban column with draggable-styled cards, count badge, and add button

Data Displaykanbanboardcardsproject

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badgenpx shadcn@latest add buttonnpx shadcn@latest add scroll-area

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Badge } from "@/components/ui/badge"
6import { Button } from "@/components/ui/button"
7import { ScrollArea } from "@/components/ui/scroll-area"
8import { Avatar, AvatarFallback } from "@/components/ui/avatar"
9import { cn } from "@/lib/utils"
10
11interface KanbanColumnProps {
12  className?: string
13}
14
15interface Task {
16  id: string
17  title: string
18  description: string
19  priority: "high" | "medium" | "low"
20  assignee: string
21  dueDate: string
22}
23
24const priorityColors = {
25  high: "border-l-red-500",
26  medium: "border-l-amber-500",
27  low: "border-l-emerald-500",
28}
29
30const priorityBadgeColors = {
31  high: "bg-red-500/10 text-red-600 border-red-200",
32  medium: "bg-amber-500/10 text-amber-600 border-amber-200",
33  low: "bg-emerald-500/10 text-emerald-600 border-emerald-200",
34}
35
36export function KanbanColumn({ className }: KanbanColumnProps) {
37  const tasks: Task[] = [
38    { id: "1", title: "Design System Update", description: "Update color tokens and typography scale", priority: "high", assignee: "Sarah Chen", dueDate: "Dec 15" },
39    { id: "2", title: "API Integration", description: "Connect payment gateway endpoints", priority: "medium", assignee: "Alex Rivera", dueDate: "Dec 18" },
40    { id: "3", title: "User Testing", description: "Conduct usability tests for new flow", priority: "low", assignee: "Jordan Lee", dueDate: "Dec 20" },
41    { id: "4", title: "Performance Audit", description: "Optimize bundle size and load times", priority: "high", assignee: "Morgan Smith", dueDate: "Dec 16" },
42  ]
43
44  return (
45    <Card className={cn("w-full max-w-sm", className)}>
46      <CardHeader className="pb-3">
47        <div className="flex items-center justify-between">
48          <div className="flex items-center gap-2">
49            <CardTitle className="text-base">In Progress</CardTitle>
50            <Badge variant="secondary" className="text-xs">{tasks.length}</Badge>
51          </div>
52          <Button size="sm" variant="ghost" className="h-8 w-8 p-0">
53            <span className="text-lg font-light">+</span>
54          </Button>
55        </div>
56      </CardHeader>
57      <CardContent>
58        <ScrollArea className="h-[500px] pr-2">
59          <div className="space-y-3">
60            {tasks.map((task) => (
61              <Card
62                key={task.id}
63                className={cn(
64                  "p-4 cursor-grab hover:shadow-md transition-all duration-200 border-l-4",
65                  priorityColors[task.priority]
66                )}
67              >
68                <div className="flex items-start justify-between mb-2">
69                  <h4 className="font-semibold text-sm">{task.title}</h4>
70                  <Badge variant="outline" className={cn("text-xs", priorityBadgeColors[task.priority])}>
71                    {task.priority}
72                  </Badge>
73                </div>
74                <p className="text-xs text-muted-foreground mb-3 line-clamp-2">{task.description}</p>
75                <div className="flex items-center justify-between">
76                  <Avatar className="w-6 h-6">
77                    <AvatarFallback className="text-[10px] bg-primary/10 text-primary">
78                      {task.assignee.split(" ").map(n => n[0]).join("")}
79                    </AvatarFallback>
80                  </Avatar>
81                  <span className="text-xs text-muted-foreground">{task.dueDate}</span>
82                </div>
83              </Card>
84            ))}
85          </div>
86        </ScrollArea>
87      </CardContent>
88    </Card>
89  )
90}