Data Display
Kanban Board
A draggable kanban board with columns, task cards, and priority labels.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a kanban board with 4 columns: Backlog, To Do, In Progress, and Done. Each column contains draggable task cards with title, description, assignee avatar, priority badge (Low, Medium, High), and due date. Include an "Add task" button per column. Use shadcn/ui Card, Badge, Avatar, and Button components, plus Tailwind CSS. Implement drag-and-drop between columns and responsive horizontal scrolling. Make cards keyboard focusable.
Chinese Prompt
创建一个包含 4 列的看板：Backlog、To Do、In Progress 和 Done。每列包含可拖拽的任务卡片，包含标题、描述、负责人头像、优先级徽章（Low、Medium、High）和截止日期。每列包含 "Add task" 按钮。使用 shadcn/ui Card、Badge、Avatar 和 Button 组件以及 Tailwind CSS。实现列之间的拖放和响应式水平滚动。使卡片支持键盘聚焦。
## Overview
A task management kanban board with columns and draggable cards. Great for project management and workflow visualization.
## Features
- 4 customizable columns
- Draggable task cards
- Priority badges
- Assignee avatars
- Due dates
- Add task buttons
- Responsive horizontal scroll
## Usage
Copy the prompt into v0 or Cursor. Connect drag-and-drop events to your state management or backend.
## Customization
Modify the prompt to:
- Add tags/labels to cards
- Include story points or estimates
- Add column WIP limits
- Support card archiving