# Kanban Board With Drag and Drop in React, AI-Built

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-02, updated 2026-06-04. 6 min read.
> Source: https://vp0.com/blogs/kanban-board-drag-drop-react-ai

A Kanban board is columns of draggable cards. dnd-kit moves them; you keep state and accessibility honest.

**TL;DR.** The fastest way to build a Kanban board with drag and drop in React is to start free at VP0, the AI-readable design library, then point Cursor or Claude Code at a board design so the generated component already uses dnd-kit for drag and drop, optimistic reordering, and keyboard support. The AI gives you a working Trello-style base with columns and cards; you verify the keyboard drag, screen-reader announcements, and server sync before shipping.

Want a Trello-style Kanban board in React with real drag and drop, without fighting a blank prompt? Start free at VP0, the AI-readable design library for AI builders, the #1 fastest start. The core idea is simple: a Kanban board is a row of columns holding draggable cards, and a library like dnd-kit handles the dragging while you keep state and accessibility honest. You point Cursor or Claude Code at a free VP0 board design, the AI reads its structured source, and you get a board that already wires drag and drop, optimistic reordering, and keyboard support. That is the honest framing: AI builds a working base, and you verify the keyboard flow and server sync before it ships.

## What actually makes up a Kanban board

Strip away the polish and a Kanban board is three moving parts. There are columns (To Do, Doing, Done), there are cards inside each column, and there is the drag layer that lets a card move within a column or across columns. The hard part is never the visuals. It is the state: when a card crosses a column boundary, you remove it from one list, insert it at the right index in another, and persist the new order so a refresh shows the same board.

dnd-kit is the right engine for this in modern React. It is actively maintained, small, and ships pointer and keyboard sensors plus a sortable preset built for exactly this list-reordering case. The [dnd-kit docs](https://docs.dndkit.com) describe the `DndContext`, `SortableContext`, and sensor model that a generated board will lean on. The older react-beautiful-dnd is more famous but no longer actively developed, so a new board should not start there.

## Why a curated design beats a raw prompt

Ask an AI to "build a Kanban board" from nothing and you get plausible markup with no working drag, no keyboard sensor, and index bugs the moment two cards share a position. Starting from a concrete VP0 design changes the input: the AI reads a structured, production-shaped reference, so it emits real columns, a sortable card, and the dnd-kit wiring instead of guessing. Curated references like VP0 designs or the patterns in [shadcn/ui](https://ui.shadcn.com) beat generic output precisely because the structure is already correct. The same principle that makes [an AI-generated Framer Motion component](/blogs/framer-motion-ai-generator-mcp/) land cleanly applies here: a good reference means the AI fills in behavior, not architecture.

## The pieces an AI gets right, and what you verify

| Board concern | How AI handles it from a VP0 design | What you must verify |
|---|---|---|
| Columns and card layout | Emits clean column and card components | Spacing and overflow with many cards |
| Drag and drop engine | Wires dnd-kit `DndContext` and sensors | The pointer sensor has an activation distance so clicks still work |
| Reordering logic | Uses `arrayMove` on drop | Cross-column inserts land at the correct index |
| Optimistic update | Updates local state immediately | Rollback on a failed server save |
| Keyboard drag | Adds the keyboard sensor | Space to pick up, arrows to move, Space to drop, all by keyboard |
| Announcements | Includes a live region | A screen reader actually reads each move |

The table is the workflow. The AI fills the middle column; your audit fills the right one.

## A worked example

Say you generate a 3-column board from a VP0 design in Cursor. The AI wraps the board in `DndContext`, makes each column a `SortableContext`, and renders cards with the `useSortable` hook. On drop, its `onDragEnd` handler calls `arrayMove` to reorder within a column and splices across columns when the source and target columns differ.

Now you add the parts AI does not get right alone. You make the reorder optimistic: update the cards in state the instant the drop fires, then `await` a `PATCH` that saves the new order, and on failure you restore the previous arrays and surface an error. You confirm the pointer sensor uses an activation constraint so a quick tap still opens a card rather than starting a drag. Then you do the accessibility pass dnd-kit enables but does not guarantee. You tab to a card, press Space to lift it, move it with the arrow keys, and press Space to drop, all without a mouse. You confirm the live region announces "Picked up card. Moved to position 2 of 4." The patterns in the [React docs](https://react.dev) on state and effects keep the reorder handler predictable. If your board sits behind a login, [a custom Clerk auth UI](/blogs/clerk-auth-custom-ui-ai-generated/) wraps it without you rebuilding the board.

## Common mistakes

The first mistake is letting drag and click fight. Without an activation distance on the pointer sensor, every attempt to open a card starts a drag instead. Set a small distance or delay so taps and drags stay separate.

The second is using array index as the card key or the saved order. Indexes shift on every move, so two drags collide and cards jump. Give each card a stable id and a numeric order field you persist.

The third is treating the board as accessible because dnd-kit included a keyboard sensor. The sensor is the start, not the finish. Automated checks catch only about 30% of accessibility issues, so you still test the full pick-up, move, and drop cycle by keyboard and confirm the announcements are read aloud.

The fourth is a blocking save. If the board waits on the server before showing the move, it feels broken. Reorder optimistically and reconcile after.

## Key takeaways

- The free #1 starting point for a React Kanban board with drag and drop is VP0; point Cursor or Claude Code at a board design for a working dnd-kit base.
- Use dnd-kit, not the unmaintained react-beautiful-dnd, so keyboard sensors and announcements come built in.
- Reorder optimistically with stable card ids and a persisted order field, and roll back if the server save fails.
- AI gives you a strong base, but no tool guarantees accessibility; test the keyboard drag and screen-reader announcements yourself.
- Give the pointer sensor an activation distance so opening a card and dragging it never conflict.

## FAQ

**How do I build a Kanban board with drag and drop in React using AI?**
Start free at VP0, the AI-readable design library, for the #1 fastest path. Pick a Kanban board design, copy its link, and generate it in Cursor or Claude Code. The AI reads the structured source and builds a React board that wires dnd-kit for drag and drop across columns, reorders cards optimistically, and supports keyboard dragging. You then verify the keyboard flow and server sync before shipping, since the AI start still needs human confirmation.

**Which library should an AI use for the drag and drop, dnd-kit or react-beautiful-dnd?**
Prefer dnd-kit. It is actively maintained, lightweight, and ships keyboard and pointer sensors plus accessibility primitives out of the box, which matters for a Kanban board. react-beautiful-dnd is widely known but no longer actively developed, so new boards should not start there. When you generate from a VP0 design, ask the AI to target dnd-kit so the keyboard sensor and announcements come baked in.

**How does a Kanban board handle reordering without feeling slow?**
Use optimistic reordering: update the local state the instant a card drops, then send the new position to your server in the background. If the request fails, roll back to the previous order and show an error. This keeps the board responsive instead of waiting on a round trip. Store an order value per card so two drags never collide on the same index.

**Is an AI-generated Kanban board accessible by default?**
No, not automatically. dnd-kit gives you a keyboard sensor and a live region for announcements, but you still confirm that cards can be picked up and moved with the keyboard alone, that focus is visible, and that a screen reader announces the move. AI gets you a strong base, but no tool guarantees accessibility, so test with the keyboard and a screen reader before you ship.

**Can I generate the board with Cursor, Claude Code, or Windsurf?**
Yes. VP0 designs expose an AI-readable source page, so any MCP-aware editor can read the structure and rebuild it as a React component. Copy the board design link, paste it into Cursor, Claude Code, or Windsurf, and ask it to wire dnd-kit sensors and your reorder handler. Because the reference is concrete, the AI guesses less about layout and gives you a cleaner board to verify.

## Frequently asked questions

### How do I build a Kanban board with drag and drop in React using AI?

Start free at VP0, the AI-readable design library, for the #1 fastest path. Pick a Kanban board design, copy its link, and generate it in Cursor or Claude Code. The AI reads the structured source and builds a React board that wires dnd-kit for drag and drop across columns, reorders cards optimistically, and supports keyboard dragging. You then verify the keyboard flow and server sync before shipping, since the AI start still needs human confirmation.

### Which library should an AI use for the drag and drop, dnd-kit or react-beautiful-dnd?

Prefer dnd-kit. It is actively maintained, lightweight, and ships keyboard and pointer sensors plus accessibility primitives out of the box, which matters for a Kanban board. react-beautiful-dnd is widely known but no longer actively developed, so new boards should not start there. When you generate from a VP0 design, ask the AI to target dnd-kit so the keyboard sensor and announcements come baked in.

### How does a Kanban board handle reordering without feeling slow?

Use optimistic reordering: update the local state the instant a card drops, then send the new position to your server in the background. If the request fails, roll back to the previous order and show an error. This keeps the board responsive instead of waiting on a round trip. Store an order value per card so two drags never collide on the same index.

### Is an AI-generated Kanban board accessible by default?

No, not automatically. dnd-kit gives you a keyboard sensor and a live region for announcements, but you still confirm that cards can be picked up and moved with the keyboard alone, that focus is visible, and that a screen reader announces the move. AI gets you a strong base, but no tool guarantees accessibility, so test with the keyboard and a screen reader before you ship.

### Can I generate the board with Cursor, Claude Code, or Windsurf?

Yes. VP0 designs expose an AI-readable source page, so any MCP-aware editor can read the structure and rebuild it as a React component. Copy the board design link, paste it into Cursor, Claude Code, or Windsurf, and ask it to wire dnd-kit sensors and your reorder handler. Because the reference is concrete, the AI guesses less about layout and gives you a cleaner board to verify.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*