AI Prompt to Build a React Kanban Board With Drag-and-Drop

0 views Published Nov 11, 2026

This prompt gives ChatGPT, Claude, or Gemini a complete specification for building a React Kanban board with drag-and-drop column reordering and card movement. It's for frontend developers who need a working task board, with columns, cards, and drag handles, scaffolded in minutes instead of researching drag-and-drop libraries from scratch.

The prompt asks the model to use a well-supported library such as @dnd-kit/core or react-beautiful-dnd (you specify which), handle both mouse and keyboard-based reordering for accessibility, and persist board state through a callback wired up to your own backend. It pushes the model to separate the drag logic from the rendering logic so the board stays testable and the card and column components stay simple.

Because drag-and-drop interactions hide a lot of edge cases, like dropping outside a valid zone or reordering while a card is mid-animation, it helps to run the finished prompt through Prompt Debugger first to surface missing constraints before handing it to the model.

Prompt template

prompt-template

322 tokens

You are a senior React developer specializing in accessible, production-ready UI components. Context: - Framework: [REACT VERSION, e.g. React 18 with TypeScript] - Drag-and-drop library: [LIBRARY NAME, e.g. @dnd-kit/core] - Styling approach: [e.g. Tailwind CSS, CSS Modules, styled-components] - Columns or workflow stages: [LIST OF COLUMN NAMES, e.g. Backlog, In Progress, Review, Done] - State source: [e.g. local state, Zustand store, REST API endpoint] Build a Kanban board component with the following requirements: 1. Render one column per workflow stage listed above, each showing its card count 2. Support dragging cards between columns and reordering cards within a column 3. Support keyboard-based reordering, not mouse-only interaction, for accessibility 4. Identify cards by a stable [ID FIELD NAME] field, never by array index 5. Call a [CALLBACK NAME] function on every successful move, passing the card id, source column, destination column, and new index 6. Show an optimistic UI update immediately, then roll back if [CALLBACK NAME] rejects 7. Handle empty columns and drops outside any valid column gracefully Output format: - The main board component - Column and Card subcomponents - Any custom hooks used for drag state - A short usage example showing how to wire [CALLBACK NAME] to a real API call - Brief notes on any library-specific setup required, such as providers, context, or CSS imports

Want it sharper? Optimize this prompt with Prompt Optimizer, check it with the Prompt Debugger or shorten it with the Token Optimizer.

Example input

example-input

82 tokens

Framework: React 18 with TypeScript Drag-and-drop library: @dnd-kit/core Styling approach: Tailwind CSS Columns or workflow stages: To Do, In Progress, In Review, Done State source: Zustand store called useTaskStore ID field name: taskId Callback name: onTaskMoved Build the Kanban board described in the system instructions using these details.

When to use it

Scaffolding a new task-tracking or project-management feature where no kanban component exists in your codebase yet
Replacing a heavy third-party kanban package with a lighter, fully-owned component
Building a prototype to demo drag-and-drop UX before committing to a specific state-management approach
Teaching a junior developer, or a new AI assistant session, the drag-and-drop pattern your team uses in React

Best practices

Name the exact drag-and-drop library you want, such as @dnd-kit/core, react-beautiful-dnd, or @hello-pangea/dnd, instead of letting the model guess, since their APIs differ significantly
Specify whether state lives in local component state, a store like Zustand or Redux, or comes from a server, so the model doesn't invent a data layer you'll have to rip out later
Ask explicitly for keyboard-accessible drag handles, not just mouse-only drag events, if your app needs to meet accessibility requirements
Request optimistic UI updates with rollback on a failed save, so a slow network doesn't make the board feel broken

Common mistakes

Leaving out the target library, which causes the model to write pseudo-drag-and-drop logic with raw HTML5 drag events that feels janky in production
Not specifying how cards are identified, by array index versus a stable id, which breaks reordering once cards are filtered or sorted
Forgetting to ask for a loading or error state during the save callback, leaving the board silently out of sync with the server
Asking for "a kanban board" with no column or workflow details, so the model guesses at statuses that don't match your actual process

FAQs

Which React drag-and-drop library should I use for a kanban board?

@dnd-kit/core is the most actively maintained option as of 2026 and has first-class keyboard and screen-reader support. react-beautiful-dnd is no longer maintained by its original authors, so most new projects use the community fork @hello-pangea/dnd if they need its exact API.

How do I make a React kanban board accessible for keyboard users?

Enable your library's keyboard sensor alongside the pointer sensor, give every draggable card a visible focus state, and announce the new position with an aria-live region so screen reader users know where a card landed after a move.

Should kanban board state live on the client or sync to a server?

For anything beyond a demo, treat the server as the source of truth and update the client optimistically. Reconcile on the response so a failed save doesn't leave the board showing a card in a column it was never actually moved to.

Which Cuelara tool can help me tighten this prompt before using it?

Prompt Debugger — scans the prompt for missing edge cases like empty columns or failed drops before you run it. Prompt Optimizer — its Coding mode can tighten the structure if you want to adapt this template for a different component.

Found this prompt useful? Share it.

More in React Prompt Recipes

React Prompt Recipes

AI Prompt for an Accessible React Autocomplete Combobox

This prompt is for developers asking Claude , ChatGPT , or Gemini to generate a React autocomplete combobox component, the input plus dropdo…

Generate a React component with the following specification.

ROLE
- You are a frontend engineer who writes accessible, production-ready React components.

COMPONENT
- A searchable autocomplete combobox named [COMPONENT NAME].
- Props: options ([OPTION SHAPE, e.g. array of {id, label}]), value, onChange, placeholder.
- Controlled component: value and onChange are provided by the parent; do not manage selected value as internal-only state.

ACCESSIBILITY REQUIREMENTS
- Use the ARIA 1.2 combobox pattern: role="combobox" on the input, role="listbox" on the options container, role="option" on each item, and aria-activedescendant to track the highlighted option.
- Support keyboard interaction: ArrowDown/ArrowUp to move highlight, Enter to select the highlighted option, Escape to close the list, Home/End to jump to first/last option.
- Announce the number of matching results to screen readers when the list updates.

BEHAVIOR
- Filter options client-side, debounced by [DEBOUNCE MS, e.g. 150]ms.
- Close the dropdown on click outside or on Escape.
- If no options match, display [EMPTY STATE MESSAGE] inside the listbox instead of hiding it.

OUTPUT FORMAT
- A single functional component using hooks, written in [TYPESCRIPT OR JAVASCRIPT], with inline comments marking each accessibility feature.

React Prompt Recipes

AI Prompt to Build a React Command Palette (Cmd+K) Component

This AI prompt generates a complete React command palette component, the kind of Cmd+K (or Ctrl+K) search and action overlay popularized by…

ROLE: You are a senior frontend engineer who writes accessible, reusable React components with TypeScript.

TASK: Build a command palette (Cmd+K / Ctrl+K) component for a React application with the following behavior:
1. A global keyboard shortcut ([SHORTCUT, E.G. CMD+K]) opens the palette from anywhere in the app.
2. The palette renders as a centered modal overlay with a search input focused automatically on open.
3. Below the input, show a filtered, scrollable list of commands based on a prop-driven array of {id, label, icon, action, group} items.
4. Support fuzzy or substring matching on the label as the user types, updating the list in real time.
5. Support arrow-up/arrow-down to move the active selection and Enter to run the selected command's action and close the palette.
6. Escape closes the palette and returns focus to whatever element triggered it.
7. Group commands by their 'group' field with a small header label per group in the results list.

CONSTRAINTS:
- Use React hooks only, no class components.
- Trap focus inside the palette while it is open.
- Use ARIA roles appropriate for a combobox/listbox pattern.
- Style with [STYLING APPROACH, E.G. TAILWIND CSS / CSS MODULES].

OUTPUT FORMAT: A single CommandPalette.tsx component file plus a short usage example showing how to pass the command list and mount the component, with brief inline comments explaining the keyboard and focus logic.

APP CONTEXT: [BRIEF DESCRIPTION OF THE APP AND EXAMPLE COMMANDS, E.G. 'PROJECT MANAGEMENT TOOL WITH COMMANDS LIKE NEW TASK, GO TO SETTINGS, INVITE TEAMMATE']

React Prompt Recipes

AI Prompt to Build a React Infinite Scroll List With Virtualization

This prompt is for developers who need a React infinite scroll list that stays fast even with thousands of rows, by combining lazy loaded pa…

ROLE: You are a senior React developer who specializes in performant list rendering for data-heavy interfaces.

CONTEXT:
Framework: [REACT VERSION, e.g. React 18 with hooks]
Data source: [DESCRIBE THE API OR DATA SOURCE, e.g. a paginated REST endpoint returning 50 items per page]
List item shape: [DESCRIBE THE FIELDS EACH ROW NEEDS TO DISPLAY]
Expected list size: [APPROXIMATE TOTAL ROWS, e.g. up to 10,000]

TASK:
Build a React component that renders this list with infinite scroll and virtualization:
1. A custom hook that manages paginated fetching, tracks loading and error state, and triggers the next page fetch when the user nears the bottom of the list.
2. A virtualized list renderer that only mounts rows near the current viewport, using a windowing technique, with a small buffer of extra rows above and below the visible area.
3. Loading placeholders for in-flight pages and a clear end-of-list indicator when there is no more data.
4. Basic error handling that lets the user retry a failed page fetch.

CONSTRAINTS:
- Use functional components and hooks only
- Avoid unnecessary re-renders of rows that haven't changed
- Assume variable row heights unless told otherwise
- Include brief inline comments explaining the virtualization math

OUTPUT FORMAT:
1. A short explanation of the approach
2. The custom data-fetching hook as a complete code block
3. The virtualized list component as a complete code block
4. Notes on any assumptions made about row height or page size