@allem-ui/kanban

Drag-and-drop kanban board components for Allem UI -- columns, cards, and headers for project management interfaces.

Installation

npm install @allem-ui/kanban @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/kanban";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import {
  KanbanBoard,
  KanbanColumn,
  KanbanCard,
  KanbanHeader,
  KanbanAddCard,
} from "@allem-ui/kanban";

export function ProjectBoard() {
  return (
    <KanbanBoard>
      <KanbanColumn>
        <KanbanHeader title="To Do" count={3} />
        <KanbanCard title="Design homepage" />
        <KanbanCard title="Set up CI/CD" />
        <KanbanAddCard />
      </KanbanColumn>
      <KanbanColumn>
        <KanbanHeader title="In Progress" count={1} />
        <KanbanCard title="Build components" />
      </KanbanColumn>
    </KanbanBoard>
  );
}

Components

| Component | Description | |-----------|-------------| | KanbanBoard | Top-level board container with drag-and-drop context | | KanbanColumn | Vertical column that holds cards | | KanbanCard | Draggable task card | | KanbanHeader | Column header with title and card count | | KanbanAddCard | Button/form to add a new card to a column |

Features

• Drag and drop -- Move cards between columns with smooth animations
• Composable -- Build custom board layouts with individual components
• Column headers -- Built-in card count and column actions
• Add cards -- Inline card creation component
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with exported prop and data types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem