📋 KanbanUI - React Kanban Board Component

🎯 Overview

KanbanUI 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.

✨ Features

- 🎨 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

🚀 Quick Start

$3

``bash
npm install react-kanbanui


or


yarn add react-kanbanui
`

$3

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!

$3

`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 (
columns={columns}
onColumnsChange={handleColumnsChange}
theme="light"
columnHeight="600px"
/>
);
};
`

📁 Documentation Structure

- 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

🎨 Styling

KanbanUI uses Tailwind CSS classes by default but can be fully customized:

`tsx
columns={columns}
useOwnStyles={true}
className="my-custom-board"
columnHeight="700px"
/>
`

🔧 Advanced Configuration

$3

`tsx
const columns: IKanbanColumn[] = [
{
id: "in-progress",
title: "In Progress",
status: "in-progress",
maxCards: 3, // Limit to 3 cards
cards: [],
},
];
`

$3

`tsx
import { KanbanCard } from "react-kanbanui";

const CustomCard = ({ card, ...props }) => (

);
`

🎯 Performance

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.

🎨 Theming

KanbanUI supports both light and dark themes:

`tsx
// Light theme (default)


// Dark theme

`

📚 API Reference

$3

| 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 |

$3

`tsx
interface IKanbanColumn {
id: string;
title: string;
status: "todo" | "in-progress" | "review" | "done";
cards: IKanbanCard[];
color?: string;
maxCards?: number;
}
`

$3

`tsx
interface IKanbanCard {
id: string;
title: string;
description?: string;
priority: "low" | "medium" | "high" | "urgent";
status: "todo" | "in-progress" | "review" | "done";
assignee?: string;
tags?: string[];
}
``

📦 Bundle Size

- Minified: ~45KB
- Gzipped: ~12KB
- Dependencies: React, React-DOM

🌟 Browser Support

- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+

📄 License

MIT License - see LICENSE.md for details.

🤝 Contributing

See Contributing Guide for development setup and guidelines.

📞 Support

- 📚 Documentation
- 🐛 Issues
- 💬 Discussions