A modern, high-performance React Kanban board component with drag-and-drop functionality
npm install react-kanbanuiKanbanUI is a high-performance, fully customizable React Kanban board component built with TypeScript. It features smooth drag-and-drop functionality, optimized rendering, and a clean, modern design.
- ๐จ Modern Design - Clean, responsive UI with pre-compiled Tailwind CSS
- ๐ High Performance - Optimized with React.memo, useCallback, and useMemo
- ๐ฏ Drag & Drop - Smooth card reordering within and between columns
- ๐ง Fully Customizable - Override styles and behavior easily
- ๐ฑ Responsive - Works perfectly on all screen sizes
- ๐ก๏ธ Type Safe - Built with TypeScript for better developer experience
- ๐งช Well Tested - Comprehensive error handling and validation
- โฟ Accessible - ARIA compliant and keyboard navigation support
- ๐ฆ Zero Config - All styles included, no Tailwind setup required
``bash`
npm install react-kanbanuior
yarn add react-kanbanui
IMPORTANT: You MUST import the CSS file for styles to work!
`tsx
// Import the CSS file in your main app file (e.g., main.tsx, index.tsx, App.tsx)
import "react-kanbanui/dist/cjs/index.css";
// or for ESM
import "react-kanbanui/dist/esm/index.css";
// Then import the components
import { KanbanBoard, type IKanbanColumn } from "react-kanbanui";
`
Note: The CSS file includes all necessary styles - no need to install Tailwind CSS separately!
`tsx
import React, { useState } from "react";
import { KanbanBoard, IKanbanColumn } from "react-kanbanui";
const MyApp = () => {
const [columns, setColumns] = useState
{
id: "todo",
title: "To Do",
status: "todo",
cards: [
{
id: "card-1",
title: "Implement login",
description: "Create user authentication system",
priority: "high",
status: "todo",
assignee: "John Doe",
tags: ["frontend", "auth"],
},
],
},
]);
const handleColumnsChange = (newColumns: IKanbanColumn[]) => {
setColumns(newColumns);
};
return (
onColumnsChange={handleColumnsChange}
theme="light"
columnHeight="600px"
/>
);
};
`
- API Reference - Complete component API documentation
- Performance Guide - Step-by-step performance testing
- Components - Individual component documentation
- Hooks - Custom hooks reference
- Utils - Utility functions documentation
- Examples - Usage examples and patterns
- Migration Guide - Upgrading between versions
- Contributing - Development guidelines
KanbanUI uses Tailwind CSS classes by default but can be fully customized:
`tsx`
useOwnStyles={true}
className="my-custom-board"
columnHeight="700px"
/>
`tsx`
const columns: IKanbanColumn[] = [
{
id: "in-progress",
title: "In Progress",
status: "in-progress",
maxCards: 3, // Limit to 3 cards
cards: [],
},
];
`tsx
import { KanbanCard } from "react-kanbanui";
const CustomCard = ({ card, ...props }) => (
);
`
KanbanUI is optimized for performance with:
- React.memo for component memoization
- useCallback for stable function references
- useMemo for expensive calculations
- Efficient drag state management
- Minimal re-renders during drag operations
See the Performance Guide for detailed testing instructions.
KanbanUI supports both light and dark themes:
`tsx
// Light theme (default)
// Dark theme
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| columns | IKanbanColumn[] | - | Array of columns with cards |onColumnsChange
| | (columns: IKanbanColumn[]) => void | - | Callback when columns change |useOwnStyles
| | boolean | false | Use your own CSS classes |theme
| | "light" \| "dark" | "light" | Theme variant |columnHeight
| | string | "600px" | Height of columns |className
| | string | "" | Additional CSS classes |
`tsx`
interface IKanbanColumn {
id: string;
title: string;
status: "todo" | "in-progress" | "review" | "done";
cards: IKanbanCard[];
color?: string;
maxCards?: number;
}
`tsx``
interface IKanbanCard {
id: string;
title: string;
description?: string;
priority: "low" | "medium" | "high" | "urgent";
status: "todo" | "in-progress" | "review" | "done";
assignee?: string;
tags?: string[];
}
- Minified: ~45KB
- Gzipped: ~12KB
- Dependencies: React, React-DOM
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
MIT License - see LICENSE.md for details.
See Contributing Guide for development setup and guidelines.
- ๐ Documentation
- ๐ Issues
- ๐ฌ Discussions