50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T13f3,"use client"; import { useState } from "react"; import { DndContext, DragOverlay, PointerSensor, closestCorners, useSensor, useSensors, type DragStartEvent, type DragOverEvent, type DragEndEvent, } from "@dnd-kit/core"; import { arrayMove } from "@dnd-kit/sortable"; import { Card } from "@/components/ui/card"; import KanbanColumn from "@/components/shadcn-dashboard/blocks/kanban-application-01/kanban-column"; import { initialColumns } from "@/components/shadcn-dashboard/blocks/kanban-application-01/data"; import { Column, Task } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; const KanbanApplication = () => { const [columns, setColumns] = useState(initialColumns); const [activeTask, setActiveTask] = useState(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 6 } }) ); const findColumn = (id: string): Column | null => { const byId = columns.find((col) => col.id === id); if (byId) return byId; return columns.find((col) => col.tasks.some((task) => task.id === id)) ?? null; }; const handleDragStart = (event: DragStartEvent) => { const column = findColumn(event.active.id as string); const task = column?.tasks.find((t) => t.id === event.active.id) ?? null; setActiveTask(task); }; const handleDragOver = (event: DragOverEvent) => { const { active, over } = event; if (!over || active.id === over.id) return; const activeColumn = findColumn(active.id as string); const overColumn = findColumn(over.id as string); if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) return; setColumns((prev) => { const activeItems = activeColumn.tasks; const overItems = overColumn.tasks; const activeIndex = activeItems.findIndex((t) => t.id === active.id); const activeTaskItem = activeItems[activeIndex]; if (!activeTaskItem) return prev; const overIndex = overItems.findIndex((t) => t.id === over.id); const insertAt = overIndex >= 0 ? overIndex : overItems.length; return prev.map((col) => { if (col.id === activeColumn.id) { return { ...col, tasks: activeItems.filter((t) => t.id !== active.id) }; } if (col.id === overColumn.id) { const newTasks = [...overItems]; newTasks.splice(insertAt, 0, activeTaskItem); return { ...col, tasks: newTasks }; } return col; }); }); }; const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event; setActiveTask(null); if (!over) return; const activeColumn = findColumn(active.id as string); const overColumn = findColumn(over.id as string); if (!activeColumn || !overColumn || activeColumn.id !== overColumn.id) return; const activeIndex = activeColumn.tasks.findIndex((t) => t.id === active.id); const overIndex = overColumn.tasks.findIndex((t) => t.id === over.id); if (overIndex === -1 || activeIndex === overIndex) return; setColumns((prev) => prev.map((col) => col.id === activeColumn.id ? { ...col, tasks: arrayMove(col.tasks, activeIndex, overIndex) } : col ) ); }; const handleAddTask = (columnId: string, content: string) => { setColumns((prev) => prev.map((col) => col.id === columnId ? { ...col, tasks: [ ...col.tasks, { id: `task-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, content }, ], } : col ) ); }; const handleDeleteTask = (columnId: string, taskId: string) => { setColumns((prev) => prev.map((col) => col.id === columnId ? { ...col, tasks: col.tasks.filter((t) => t.id !== taskId) } : col ) ); }; return (

{columns.map((column) => ( ))}

{activeTask ? (

{activeTask.content}

) : null} ); }; export default KanbanApplication; 54:Tcf8,"use client"; import { useState } from "react"; import { useDroppable } from "@dnd-kit/core"; import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { Plus } from "lucide-react"; import { Input } from "@/components/ui/input"; import TaskCard from "@/components/shadcn-dashboard/blocks/kanban-application-01/task-card"; import { Column } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; import { Card } from "@/components/ui/card"; type Props = { column: Column; onAddTask: (columnId: string, content: string) => void; onDeleteTask: (columnId: string, taskId: string) => void; }; const KanbanColumn = ({ column, onAddTask, onDeleteTask }: Props) => { const { setNodeRef } = useDroppable({ id: column.id }); const [isAdding, setIsAdding] = useState(false); const [value, setValue] = useState(""); const Icon = column.icon; const commitAdd = () => { if (value.trim()) { onAddTask(column.id, value.trim()); } setValue(""); setIsAdding(false); }; return (

{column.title}

{String(column.tasks.length).padStart(2, "0")}

task.id)} strategy={verticalListSortingStrategy} > {column.tasks.map((task) => ( onDeleteTask(column.id, task.id)} /> ))} {isAdding && ( setValue(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") commitAdd(); if (e.key === "Escape") { setValue(""); setIsAdding(false); } }} onBlur={commitAdd} placeholder="Task title" className="bg-card text-sm shadow-sm" /> )}

); }; export default KanbanColumn; 55:T68e,"use client"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { Trash2 } from "lucide-react"; import { Task } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; type Props = { task: Task; onDelete: () => void; }; const TaskCard = ({ task, onDelete }: Props) => { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: task.id }); const style = { transform: CSS.Transform.toString(transform), transition, }; return (

{task.content}

); }; export default TaskCard; 56:T46c,import { CircleDot, CircleCheck, CircleDashed } from "lucide-react"; import { Column } from "@/components/shadcn-dashboard/blocks/kanban-application-01/types"; export const initialColumns: Column[] = [ { id: "todo", title: "To Do", icon: CircleDashed, iconClassName: "text-muted-foreground fill-muted-foreground", tasks: [ { id: "task-1", content: "Configure Shadcn & Tailwind" }, { id: "task-2", content: "Design drag-and-drop" }, { id: "task-3", content: "Implement dark mode" }, ], }, { id: "in-progress", title: "In Progress", icon: CircleDot, iconClassName: "text-orange-400", tasks: [ { id: "task-4", content: "Animate card drops" }, { id: "task-5", content: "Sync state to local storage" }, ], }, { id: "done", title: "Done", icon: CircleCheck, iconClassName: "text-chart-2", tasks: [ { id: "task-6", content: "Add Auth.js middleware" }, { id: "task-7", content: "Scaffold sidebar layout" }, { id: "task-8", content: "Init Next.js TS project" }, ], }, ]; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@dnd-kit/core",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["card","input","button"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcndashboard.dev/r/kanban-application-01.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/kanban-application-01","itemId":"@shadcn-dashboard/kanban-application-01"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/page.tsx","content":"import KanbanApplication from \"@/components/shadcn-dashboard/blocks/kanban-application-01\";\r\n\r\nexport default function page() {\r\n return ;\r\n}","type":"registry:page","target":"app/kanban-application-01/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/index.tsx","content":"$53","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/index.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/kanban-column.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/kanban-column.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/task-card.tsx","content":"$55","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/task-card.tsx"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/data.ts","content":"$56","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/data.ts"},{"path":"src/components/shadcn-dashboard/blocks/kanban-application-01/types.ts","content":"import { LucideIcon } from \"lucide-react\";\r\n\r\nexport type Task = {\r\n id: string;\r\n content: string;\r\n};\r\n\r\nexport type Column = {\r\n id: string;\r\n title: string;\r\n icon: LucideIcon;\r\n iconClassName: string;\r\n tasks: Task[];\r\n};\r\n","type":"registry:component","target":"components/shadcn-dashboard/blocks/kanban-application-01/types.ts"}]}]]}],"$L57"]}]

Kanban Application 01 Simple Task Board

Installation

Files

app

components

Styles