Kanban Kit
Drag-and-drop kanban board with columns, tasks, priorities, assignees, and labels. Includes both UI and backend scaffolding.
Quick reference
CLI commands
# Add UI components (board, columns, tasks, drag-and-drop)
npx @fivfold/ui add kanban
# Add backend scaffolding (Express/NestJS + TypeORM)
npx @fivfold/api add kanban --framework=nestjs --orm=typeorm
# Use MongoDB + Mongoose
npx @fivfold/api add kanban --framework=nestjs --orm=mongoose --database=mongodb
# Use Express + Prisma
npx @fivfold/api add kanban --framework=express --orm=prisma
# Dry run to preview files
npx @fivfold/ui add kanban --dry-run
npx @fivfold/api add kanban --dry-runOverview
The Kanban Kit provides a full kanban board UI with drag-and-drop columns and tasks, priorities, assignees, and labels. Built with shadcn/ui Card, Badge, Avatar, ScrollArea, and @dnd-kit for drag-and-drop. Each Kit in FivFold combines a polished frontend with optional backend scaffolding for Express or NestJS. Supported combinations:
| Layer | Options |
|---|---|
| Framework | NestJS, Express |
| SQL | TypeORM (PostgreSQL, MySQL, MariaDB, MSSQL), Prisma |
| NoSQL | Mongoose (MongoDB), Prisma (MongoDB connector) |
| Cloud NoSQL | Azure Cosmos DB SDK, AWS DynamoDB SDK |
Demo
This demo is presented with Mock Data
Project Board
Guide
Step-by-step guides for the frontend UI and backend API integration. Pick Frontend first in the sidebar, then the rest of your stack, for aligned dev-server and API docs.
The Kanban Kit is built exclusively with shadcn/ui primitives. Follow the steps below to install, integrate, and customize the UI.
1Install the Kanban Kit
Run the FivFold UI CLI to add the Kanban Kit to your project. Ensure you have run npx @fivfold/ui init first.
npx @fivfold/ui add kanbanThe Kit is copied to @/components/ui/kits/kanban/ (or your configured kits alias in fivfold.json).
2Generated file structure
The command creates a folder with multiple component files for easier development and customization:
kits/kanban/
types.ts # Shared types (FivFoldKanbanColumn, FivFoldKanbanTask, etc.)
board-header.tsx # Board title and search
board.tsx # Main board layout with columns
column.tsx # Column container with task list
column-header.tsx # Column title and add-task button
task-card.tsx # Task card with priority, assignee, labels
task-detail.tsx # Task detail dialog (view/edit)
add-task-dialog.tsx # Create task form
drag-provider.tsx # @dnd-kit DndContext wrapper
index.tsx # Main KanbanKit component and re-exports3Import and use in your app
Import the main component and types from the kit folder:
import { KanbanKit } from "@/components/ui/kits/kanban";
import type { FivFoldKanbanColumn, FivFoldKanbanLabel } from "@/components/ui/kits/kanban";
const LABELS: FivFoldKanbanLabel[] = [
{ id: "design", name: "Design", color: "#8b5cf6" },
{ id: "frontend", name: "Frontend", color: "#3b82f6" },
// ...
];
export function KanbanPage() {
const [columns, setColumns] = useState<FivFoldKanbanColumn[]>([]);
return (
<KanbanKit
columns={columns}
onColumnsChange={setColumns}
availableLabels={LABELS}
boardTitle="Project Board"
showPriority
showAssignee
showDueDate
showLabels
showAttachments
showComments
/>
);
}4Props reference
The Kanban Kit exposes a single KanbanKit component. Props control board behavior and visibility of optional features.
Board & Columns
Core data and layout. Uses Card, ScrollArea, @dnd-kit for drag-and-drop.
| Prop | Type | Purpose |
|---|---|---|
| columns | FivFoldKanbanColumn[] | List of columns with tasks. Map from your API response. Tasks use labels: FivFoldKanbanLabel[] for colored labels. |
| onColumnsChange | (columns) => void | Callback when columns/tasks change (e.g. drag-drop). Call PATCH /api/kanban/tasks/:id/move. |
| availableLabels | FivFoldKanbanLabel[] | Predefined label definitions (id, name, color) for the board. Passed to Add Task dialog for label selection. |
| boardTitle | string | Board header title. |
| mobileLayout | "scroll" | "stack" | Mobile layout: horizontal scroll or stacked columns. |
| portalContainer | HTMLElement | null | When set (e.g. in device preview), add-task and task-detail dialogs render inside this container instead of document.body. |
Visibility toggles
Show/hide optional task fields. Uses Badge, Avatar.
| Prop | Type | Purpose |
|---|---|---|
| showPriority | boolean | Show priority badge (Low, Medium, High, Urgent). |
| showAssignee | boolean | Show assignee avatar. |
| showDueDate | boolean | Show due date on task cards. |
| showLabels | boolean | Show labels on task cards. |
| showAttachments | boolean | Show attachment count. |
| showComments | boolean | Show comment count. |
Types
FivFoldKanbanLabel has id, name, and color (hex). Tasks use labels?: FivFoldKanbanLabel[]. Optional task fields: taskId, storyPoints, sprint, reporter.
Callbacks
Optional handlers for task click and add task.
| Prop | Type | Purpose |
|---|---|---|
| onTaskClick | (task) => void | Override default task detail dialog. Use for custom routing. |
| onAddTask | (columnId) => void | Override default add-task dialog. Use for API-driven create flow. |
| onSearch | (query) => void | Search callback. Filter columns/tasks or call API. |
5Integration with backend
You own the wiring
The step-by-step guides, environment variables, and dev-server proxy or rewrite examples are suggestions—not a mandated layout. You should read the generated files, your existing routes and auth, and your deployment topology, then choose URLs, origins, and headers that match your app. We encourage verifying every connection yourself before shipping.
Step-by-step: Kanban UI → API
Examples match the Frontend choice in the stack sidebar (Next.js). Your mount paths may differ; adjust prefixes to match how you register routes and proxies.
Next.js → API
Prefer rewrites in next.config.ts so browser code can use same-origin paths like /api/kanban/... while the dev server forwards to your backend. Alternatively set NEXT_PUBLIC_API_URL and call that base from client code.
// next.config.ts — example rewrite to API on another port
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'http://localhost:3001/:path*', // your Nest/Express port
},
];
},
};
export default nextConfig;If the app and API both use port 3000, run the API on a different port (e.g. 3001) or use a monorepo BFF pattern.
API → browser (CORS)
Allow your UI's dev origin on the API. For Next.js that is typically http://localhost:3000 (plus 127.0.0.1 if you use it).
Production
https://api.example.com/kanban) and lock CORS to known web origins — not *.Connecting Kanban (UI layer) data to your user system
Board and task props are user-agnostic in the kit. Your data hooks must load boards for the signed-in user and send the same user context to the API when creating or moving tasks.
- Include auth headers on every mutating call (create task, move column) so the backend can enforce ownership.
- Map assignee display from your user directory if the API returns ids only.
- For multi-board apps, pass boardId from routing and keep it in sync with API paths.
Inspect generated code
userId, ownerId, etc.) to your User table or IdP subject. Migrate or add FKs where needed—FivFold cannot know your prior schema.7shadcn/ui primitives
Adding the Kanban Kit installs these shadcn/ui primitives if not already present:
| Component | Used in |
|---|---|
| card | Columns, task cards, task detail, add-task dialog |
| scroll-area | Column task list, board layout |
| badge | Priority, labels |
| avatar | Assignee avatars |
| button | Add task, actions |
| dialog | Task detail, add-task form |
| input | Search, form fields |
| label | Form labels in add-task |
| textarea | Task description |
| select | Priority, assignee picker |
| separator | Visual dividers |
| tooltip | Hover hints |
8Additional dependencies
The kit uses @dnd-kit/core, @dnd-kit/sortable, and @dnd-kit/utilities for drag-and-drop. They are added when you run npx @fivfold/ui add kanban.