CleenUI · Project Management · KanbanBoard

KanbanBoard

Pro

Multi-column drag-and-drop board with WIP limits, custom card rendering, and live backend persistence.

storybook.cleenui.com · project-management-kanbanboard--default
Open in new window

About KanbanBoard

KanbanBoard is the standard work-tracking board: columns represent status, cards represent tasks, drag-and-drop moves work between states. The component handles touch and pointer drag inputs uniformly, fires events for every drag, drop, and reorder, and persists state via a single async handler.

WIP (work-in-progress) limits per column enforce flow constraints visually — columns over their limit get a red-border treatment. Cards accept any custom render function so you can show priority badges, assignees, due dates, or whatever your domain needs.

When to use it

  • Engineering work boards (To do / In progress / Review / Done).
  • Sales pipeline (Lead / Qualified / Proposal / Closed).
  • Support ticket triage with priority columns.
  • Custom workflows with named status transitions.

Common props

Prop
Type
Description
columns
Column[]
Column definitions {key, label, limit}.
cards
Card[]
Cards keyed by column.
onMove
(card, from, to, index) => Promise<void>
Async persistence on drop.
renderCard
(card) => ReactNode
Custom card renderer.
limits
Record<string, number>
WIP limits per column key.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.