with one click
kanban-board
Use when you need to organize tasks in columns and swimlanes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
Use when you need to organize tasks in columns and swimlanes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | kanban-board |
| description | Use when you need to organize tasks in columns and swimlanes. |
| metadata | {"id":"kanban-board","category":"data-display","pattern":"Kanban Board","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/data-display/kanban-board","sourcePath":"apps/web/content/patterns/data-display/kanban-board.mdx"} |
Organize tasks in columns and swimlanes
A Kanban Board pattern helps teams create a reliable way to show work moving through stages so teams can balance flow, spot blockers, and reprioritize visually. It is most useful when teams need task and issue tracking. Compared with adjacent patterns, this pattern should reduce friction without hiding the state, rules, or recovery paths people need to keep moving.
references/pattern.md, then choose the smallest viable variation.aria-describedby or structural headings when useful.The Problem: Teams often pick a visually familiar pattern before confirming whether users need comparison, exploration, or scanning.
How to Fix It? Start from the user task, then map the layout to comparison, chronology, hierarchy, or overview needs.
The Problem: A polished default view still feels broken when loading, empty, and error states are inconsistent.
How to Fix It? Design the data lifecycle up front, including empty, partial, stale, and failed results.
The Problem: Large tables, dense dashboards, and heavy cards collapse quickly on small screens.
How to Fix It? Define a mobile strategy such as stacked cards, progressive disclosure, or alternate summaries before implementation.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/data-display/kanban-board
Use when implementing help users understand their current location.
Use when implementing expand and collapse content sections.
Use when implementing user account configuration and preferences.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.