Fluid Drag-and-Drop Kanban

Pro

A Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.

heavy saas blocksfluidkanbanboardframer motiontabler icons react

Fluid Drag-and-Drop Kanban component preview

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add fluid-kanban-board

Usage

Import FluidKanbanBoard from @/components/wensity/fluid-kanban-board and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import {
 3  FluidKanbanBoard,
 4  type KanbanColumn,
 5} from "@/components/wensity/fluid-kanban-board";
 6
 7const columns: KanbanColumn[] = [
 8  {
 9    id: "in-progress", title: "In Progress", count: 25, accent: "violet",
10    cards: [
11      {
12        id: "1",
13        title: "UI/UX Design in the age of AI",
14        description: "Lorem ipsum dolor sit amet, libre unst consectetur adipisicing elit.",
15        tag: "Important",
16        tagTone: "violet",
17        assignees: [
18          { name: "Parth", avatar: "https://assets.wensity.com/avatars/1.webp" },
19          { name: "Maya Chen", avatar: "https://assets.wensity.com/avatars/2.webp" },
20        ],
21        comments: 11,
22        completed: 187,
23      },
24    ],
25  },
26  {
27    id: "reviewed", title: "Reviewed", count: 8, accent: "amber",
28    cards: [
29      {
30        id: "2",
31        title: "User flow confirmation for finance app",
32        description: "Lorem ipsum dolor sit amet, libre unst consectetur adipisicing elit.",
33        tag: "Important",
34        tagTone: "violet",
35        assignees: [{ name: "Maya Chen", avatar: "https://assets.wensity.com/avatars/2.webp" }],
36        comments: 8,
37        completed: 112,
38      },
39    ],
40  },
41  {
42    id: "completed", title: "Completed", count: 2, accent: "emerald",
43    cards: [
44      {
45        id: "3",
46        title: "UI/UX Design in the age of AI",
47        description: "Lorem ipsum dolor sit amet, libre unst consectetur adipisicing elit.",
48        tag: "High Priority",
49        tagTone: "red",
50        assignees: [
51          { name: "Parth", avatar: "https://assets.wensity.com/avatars/1.webp" },
52          { name: "Leo Morgan", avatar: "https://assets.wensity.com/avatars/4.webp" },
53        ],
54        comments: "108k",
55        completed: 997,
56      },
57    ],
58  },
59];
60
61export function FluidKanbanBoardDemo() {
62  return <FluidKanbanBoard columns={columns} />;
63}

Props

Prop	Type	Default	Description
`columns`	KanbanColumn[]	-	Initial columns and cards. The component manages board state internally.
`onChange`	(columns: KanbanColumn[]) => void	-	Fired any time the board state changes.