Kanban Board

Drag-and-drop Kanban board with column and card sorting, inline card creation, and priority badges.

To Do3

Design system audit

Review all tokens and component variants

highdesign

Write unit tests

mediumeng

Update changelog

low

In Progress2

Kanban component

Drag-and-drop board with dnd-kit

higheng

Landing page copy

mediummarketing

Done2

Dark mode tokens

OKLCH-based color scale

lowdesign

CI pipeline setup

mediumeng

Code

import { KanbanBoard } from "@/components/ui/kanban"

export default function Example() {
  return <KanbanBoard />
}

Installation

$npx particleui-cli add kanban

TSX

import { KanbanBoard } from "@/components/ui/kanban"

export default function Example() {
  return <KanbanBoard />
}

Prop	Type	Default	Required
card	KanbanCard	—	yes
isDragging	boolean	—	no
card	KanbanCard	—	yes
onAdd	(title: string) => void	—	yes
onCancel	() => void	—	yes
column	KanbanColumn	—	yes
onAddCard	(columnId: string, title: string) => void	—	yes
initialColumns	KanbanColumn[]	—	no
className	string	—	no

Source filecomponents/ui/kanban.tsx

Typeui

Categorieslayout, blocks

npm dependencies@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, lucide-react

Registry deps

Claude skill—