Shadcn Kanban

What is Shadcn Kanban?

ReUI Kanban is a custom drag-and-drop board component for React, not part of the base shadcn/ui library. It is built on @dnd-kit/core for sensor and collision detection, @dnd-kit/sortable for the sortable context around cards and columns, and composes shadcn Card, Badge, Button, Avatar, and Progress for card content.

Each board component exposes columns and cards as plain data structures : arrays of column objects containing card arrays. So you can sync state to a REST API, GraphQL mutation, or Next.js Server Action after each drag. The drag overlay duplicates the active card during a drag, keeping the source column stable and giving users a clear visual target.

Why Use Shadcn Kanban?

Kanban boards appear in project management tools, product roadmaps, CRM pipelines, sprint planning views, and content calendars. DnD Kit is the industry standard for accessible drag-and-drop in React : it handles touch, mouse, and keyboard sensors, ARIA announcements, and scroll-container detection without a large bundle footprint.

ReUI components show boards in realistic frame containers with real card content : assignees, labels, due dates, progress. So you can judge composition and density before implementation. Pair with Shadcn Data Grid for list views and Shadcn Filters for board-level filtering.

Shadcn Kanban Features

• DnD Kit Core and Sortable. Built on @dnd-kit/core and @dnd-kit/sortable. Pointer, touch, and keyboard sensors work out of the box. Collision detection handles both same-column reordering and cross-column card moves.
• Placeholder and Dynamic Drag Overlays. Two overlay strategies: placeholder overlay leaves an empty slot in the source column during drag; dynamic overlay animates the card without a placeholder. Choose based on desired visual feedback.
• Frame-Column Layout. Columns render inside shadcn Frame containers with scrollable card lists. Keeps board chrome consistent with the rest of a dashboard layout.
• Feature Roadmap Variant. Built-in roadmap component groups cards by status with per-column Progress indicators. Ready to wire into product planning, ticket tracking, or release management systems.
• Composable Card Content. Cards compose shadcn Card, Badge, Avatar, Button, and Progress. Add assignees, priority labels, due dates, and story points without breaking DnD Kit pointer-event targets.
• Plain State : Wire to Any Backend. Board state is an array of column objects. After each drag, call your Server Action, REST endpoint, or GraphQL mutation with the new order. No proprietary state management required.
• Keyboard Accessible Reordering. DnD Kit's keyboard sensor lets users move cards with arrow keys and confirm drops with Space or Enter : meeting WCAG 2.1 success criteria for drag-and-drop alternatives.

ReUI Kanban: In-House Custom Shadcn Component

ReUI Kanban is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project : following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Kanban is a custom drag-and-drop board component not available in base shadcn/ui. It is powered by @dnd-kit/core for collision detection and sensor management, and @dnd-kit/sortable for the sortable context around cards and columns. Five components cover placeholder overlay, dynamic overlay, frame-column layout, minimal stacked board, and feature roadmap with Progress tracking.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling : only the underlying headless primitive differs. ReUI maintains 17 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.