Kanban

A Kanban board is a visual representation of work processes used to manage and optimize workflow.

Import#

The Kanban board is composed of several key primitives:

  • Kanban: The canvas or workspace that provides context.
  • KanbanColumn: Columns represent different stages or phases in your workflow.
  • KanbanColumnHeader: The header of a column.
  • KanbanColumnBody: The body of a column.
  • KanbanColumnDragHandle: Handle to allow sorting of columns.
  • KanbanCard: A card represents an individual work item or task.
  • KanbanDragOverlay: A drag overlay that can be used to provide visual feedback.
  • KanbanTrash: Allows cards to be dropped and removed.
  • useKanbanContext: A hook to access the Kanban context.
import {
Kanban,
KanbanColumn,
KanbanColumnHeader,
KanbanColumnHandle,
KanbanCard,
KanbanTrash,
useKanbanContext,
} from '@saas-ui-pro/kanban'

Usage#

These Kanban primitives can be used to build advanced workflows that allows items to be moved over different stages.

Basic#

This is a basic example showing a simple Kanban board with 3 columns.

Controlled#

You can control the items by passing the items and onChange props to the Kanban component.

Draggable columns#

You can make columns draggable by using the KanbanColumnDragHandle component.

Toggle columns#

You can toggle column visibility by using useState.

Removing items#

You can remove items by dragging them into the KanbanTrash component.

Add event listeners#

The Kanban component provides several event listeners that can be used to listen to drag events.

  • onCardDragEnd: Called when a card drag ends.
  • onColumnDragEnd: Called when a column drag ends.

Was this helpful?