ReUIReUI
2.7kX

Shadcn Kanban

Custom Shadcn Kanban 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 @reui/kanban

Usage

import {
  Kanban,
  KanbanBoard,
  KanbanColumn,
  KanbanColumnContent,
  KanbanColumnHandle,
  KanbanItem,
  KanbanItemHandle,
  KanbanOverlay,
} from "@/components/reui/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 Shadcn Kanban components

Browse 5 production-ready Shadcn Kanban components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

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