#What is Recursive dnd-kit?

Recursive dnd-kit is a free, open-source React application by mehrdadrafiee, designed to provide a flexible, accessible Kanban board with recursive column generation for shadcn-ui users. It’s ideal for developers building task management or project tracking tools in Next.js, where dynamic, nested task structures are needed, such as Agile boards or workflow managers.

Built with Next.js, TypeScript, Tailwind CSS, shadcn-ui, and @dnd-kit, it leverages @dnd-kit for smooth drag-and-drop functionality and shadcn-ui for accessible UI components. Unlike Georgegriff’s react-dnd-kit-tailwind-shadcn-ui, which uses fixed columns, this project employs a recursive approach to generate columns, allowing for nested task hierarchies.

#Features ⚡️

• Recursive Columns: Generates Kanban columns dynamically, supporting nested task structures.

• Drag-and-Drop: Move tasks between columns or within hierarchies using @dnd-kit.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance for screen reader support.

• Responsive Layout: Tailwind CSS ensures adaptability across devices.

• TypeScript Support: Type-safe for robust development.

• Smooth Animations: @dnd-kit provides fluid drag-and-drop transitions.

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Aligns with shadcn-ui’s aesthetic and accessibility standards.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• Recursive Flexibility: Supports complex, nested task structures unlike fixed-column boards.

• Lightweight: Minimal dependencies with @dnd-kit for performant drag-and-drop.

• Demo Available: Live preview aids evaluation and setup.

#Cons ⚠️

• React Dependency: Limited to React/Next.js/shadcn-ui ecosystems.

• No CLI Integration: Requires manual cloning and setup, unlike shadcn-ui components with CLI support.

• Setup Requirements: Needs Next.js, shadcn-ui, Tailwind CSS, and @dnd-kit installed.

• Client-Side Focus: Drag-and-drop is client-side; server-side persistence requires custom logic.

• Limited Documentation: Lacks detailed setup or customization guides compared to shadcn-chat.

#Included Components

• KanbanBoard: Main component managing recursive column rendering.

• DraggableTask: Task card with @dnd-kit’s useDraggable for drag functionality.

• DroppableColumn: Column container with @dnd-kit’s useDroppable for drop zones.

• DndContext: @dnd-kit context for handling drag events.

#Pricing 💸

Recursive dnd-kit is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for the application.

• Next.js: Powers project structure and routing.

• shadcn-ui: Provides accessible UI components (e.g., Card, Button).

• Tailwind CSS: Utility-first styling for responsive design.

• TypeScript: Ensures type safety.

• @dnd-kit: Core and sortable packages for drag-and-drop functionality.