Fabric UI

Kanban

Fabric UI Kanban component for React and Tailwind CSS. A drag-and-drop kanban component designed for seamless item organization across customizable columns.

Radix UIBase UI
Radix UI
"use client"

import { ComponentProps, useState } from "react"

Installation

pnpm dlx shadcn@latest add @fabric-ui/kanban

Usage

import {
  Kanban,
  KanbanBoard,
  KanbanColumn,
  KanbanColumnContent,
  KanbanColumnHandle,
  KanbanItem,
  KanbanItemHandle,
  KanbanOverlay,
} from "@/components/fabric-ui/kanban"
<Kanban
  value={columns}
  onValueChange={setColumns}
  getItemValue={(item) => item.id}
>
  <KanbanBoard>
    {Object.entries(columns).map(([id, items]) => (
      <KanbanColumn key={id} value={id}>
        <KanbanColumnHandle>
          <h3>{id}</h3>
        </KanbanColumnHandle>
        <KanbanColumnContent value={id}>
          {items.map((item) => (
            <KanbanItem key={item.id} value={item.id}>
              <KanbanItemHandle>{item.content}</KanbanItemHandle>
            </KanbanItem>
          ))}
        </KanbanColumnContent>
      </KanbanColumn>
    ))}
  </KanbanBoard>
  <KanbanOverlay>
    <div className="bg-muted size-full rounded-md" />
  </KanbanOverlay>
</Kanban>

Examples

Overlay

"use client"

import { ComponentProps, useState } from "react"

API Reference

Kanban

The root component that provides the kanban context and manages the items state.

PropTypeDefaultDescription
valueRecord<string, T[]>-Required. The current state of columns and their items.
onValueChange(value: Record<string, T[]>) => void-Required. Callback fired when items are moved within or between columns.
getItemValue(item: T) => string-Required. Function to get a unique identifier for an item.
onItemClick(item: T) => void-Callback fired when an item is clicked.
classNamestring-Additional CSS classes for the container.

KanbanBoard

The horizontal container for kanban columns.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the board.

KanbanColumn

An individual column within the kanban board.

PropTypeDefaultDescription
valuestring-Required. The unique identifier for the column.
classNamestring-Additional CSS classes for the column.

KanbanColumnHandle

The drag handle for a column (if columns are sortable).

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the handle.

KanbanColumnContent

The scrollable area within a column that holds the items.

PropTypeDefaultDescription
valuestring-Required. The identifier of the column this content belongs to.
classNamestring-Additional CSS classes for the content area.

KanbanItem

An individual draggable item within a column.

PropTypeDefaultDescription
valuestring-Required. The unique identifier for the item.
disabledbooleanfalseWhether the item is draggable.
classNamestring-Additional CSS classes for the item.

KanbanItemHandle

The drag handle for an individual item.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the handle.

KanbanOverlay

The ghost element displayed during a drag operation.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the overlay.

More Kanban components

Browse 5 production-ready Kanban components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.

Browse all 5 Kanban components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.