Shadcn Kanban

Browse 6 production-ready shadcn kanban board components using @dnd-kit/core and @dnd-kit/sortable. Covers placeholder and dynamic drag overlays, frame-column layouts, minimal stacked boards, and feature roadmap views with progress tracking : all composable with shadcn Card, Badge, and Avatar.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Boards that move cards between status columns by drag and drop
Roadmap and workflow views where each column is one stage of the work

When not to use

A finished tracker for issues, tickets or releases with rich cards: use the Kanban Board blocks
A sales deal pipeline with values, owners and stage forecasts: use the CRM blocks
A single flat list reordered by drag, with no columns: use the Sortable component

Agent notes

Save moves in onValueCommit, which fires once per drop with previousValue for rollback; onValueChange also fires mid drag
Drag listeners live on KanbanItemHandle and KanbanColumnHandle; a card or column without one cannot be dragged
KanbanColumnHandle is hidden until its column is hovered or the handle has keyboard focus, so keep the column title outside it

Third-party API docs

dnd kit v6: API reference, docs (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin
Sonner v2: API reference, docs, used by 1 of 6 examples

Markdownhttps://web.dev.reui.io/components/kanban.md

MCPget_component("kanban")

Installnpx shadcn@latest add @reui/kanban

Full index for agents:llms.txtReUI MCP setup

Shadcn Kanban: Drag-and-Drop Task Boards for React

ReUI Kanban is a custom shadcn component built on @dnd-kit/core and @dnd-kit/sortable : the same collision-detection engine used across ReUI's Sortable and Data Grid components. Cards drag between columns with pointer and keyboard support, drag overlays prevent layout shift, and the board state is plain React state you can wire to any backend.

6 components cover placeholder overlay, dynamic overlay, frame-column layout, minimal stacked boards, and a feature roadmap view with a progress bar on each card.

The sections below cover what ReUI Kanban provides, why teams adopt it for product management and CRM, and how it composes with Card, Badge, Avatar, and other shadcn primitives.

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 : an object keyed by column id, each holding its array of cards. 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 a Progress bar on each card. 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 a plain object keyed by column id, each holding its array of cards (Record<columnId, T[]>). 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. 6 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 22 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.

Pair kanban with Shadcn Data Grid to offer a list-view toggle. Users can switch between the board and a sortable, filterable table of the same records : a common component in project management and CRM tools.

Use Shadcn Badge for priority and status labels on cards, Shadcn Avatar for assignees, and Shadcn Progress for story-point or task-completion indicators inside each card.

Wrap the board in a Shadcn Frame for a toolbar with view toggles, Shadcn Filters for board-level filtering, and Shadcn Sonner for async feedback when card moves are persisted to a backend.

Kanban Board Blocks in ReUI Pro

The free examples above pair with 10 production ready kanban board blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Kanban Board (10 blocks)Kanban board layouts with drag-and-drop columns, cards, and project management features.

Browse all Application blocks

Frequently Asked Questions

How do I persist board state after dragging a card to a new column?

Keep value and onValueChange for the live board, then use onValueCommit to save. It fires once per completed drag with the final board and a previousValue snapshot, so you can update optimistically and roll back on error with a Sonner toast. The kanban and sortable examples show this wired to a simulated backend end to end.

Can I restrict cards from dragging between certain columns?

Yes. For card moves, pass onMove: it fires once on drop with the source and destination column IDs, so you can skip a disallowed move and show a Sonner toast (note that onMove turns off the live cross-column preview, and column reorders still arrive through onValueChange). You can also validate inside onValueCommit and call setColumns with meta.previousValue to revert a move that is not allowed.

How do I enable keyboard drag and drop for accessibility?

DnD Kit's keyboard sensor handles this out of the box. Use arrow keys to move cards within a column, then press Space or Enter to confirm. Test with a screen reader to ensure ARIA announcements are clear and users understand the drag interaction.

How do I implement optimistic UI when dragging cards?

Use onValueCommit. It fires once when a drag completes, never during the live preview, with the final board and a previousValue snapshot. Apply the move optimistically through onValueChange, persist inside onValueCommit, and on failure call setColumns with meta.previousValue and show an error toast. Prefer a refetch on error if the user might drag again before the request settles.

Does the kanban board handle many cards efficiently?

DnD Kit is performant with hundreds of cards. Virtual scrolling within columns (using TanStack React Virtual) can further improve performance for very large boards. Test with your target data volume to ensure smooth dragging.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.