A drag, touch, and keyboard-accessible card-movement layer for a Kanban board, with a non-drag "Move" menu, drop validation, drop indicators, and optimistic moves with rollback on failure.
"use client";
import * as React from "react";
import {
KanbanCardMovement,
type KanbanColumn,
type KanbanCard,
} from "@/components/ui/kanban-card-movement";
const columns: KanbanColumn[] = [
{ id: "todo", title: "To do" },
{ id: "in-progress", title: "In progress", limit: 3 },
{ id: "done", title: "Done" },
];
const initialCards: KanbanCard[] = [
{
id: "1",
columnId: "todo",
title: "Design onboarding flow",
order: 0,
meta: "UX",
},
{
id: "2",
columnId: "todo",
title: "Write release notes",
order: 1,
meta: "Docs",
},
{
id: "3",
columnId: "in-progress",
title: "Fix pagination bug",
order: 0,
meta: "Bug",
},
{
id: "4",
columnId: "in-progress",
title: "Review PR #482",
order: 1,
meta: "Review",
},
{ id: "5", columnId: "done", title: "Ship v1.4", order: 0, meta: "Release" },
];
export default function KanbanCardMovementDemo() {
const [cards, setCards] = React.useState<KanbanCard[]>(initialCards);
return (
<div className="w-full p-6">
<KanbanCardMovement
columns={columns}
cards={cards}
onMove={({ cardId, toColumn, toIndex }) => {
setCards((prev) => {
const moved = prev.find((c) => c.id === cardId);
if (!moved) return prev;
const rest = prev.filter((c) => c.id !== cardId);
const inTarget = rest
.filter((c) => c.columnId === toColumn)
.sort((a, b) => a.order - b.order);
inTarget.splice(toIndex, 0, { ...moved, columnId: toColumn });
const others = rest.filter((c) => c.columnId !== toColumn);
const reindexed = inTarget.map((c, i) => ({ ...c, order: i }));
return [...others, ...reindexed];
});
}}
/>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.