kanban board project-management tasks agile drag-drop kanban board tasks columns drag agile sprint task management board kanban project view
Kanban Base
Fetch pattern JSON:
curl https://webspire.de/patterns/kanban/base.json base.html
<section class="ws-kanban bg-slate-50 p-6">
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
<h2 class="text-xl font-bold text-slate-900">Project Board</h2>
<div class="flex items-center gap-3">
<div class="flex -space-x-2">
<div class="h-8 w-8 rounded-full bg-slate-300 ring-2 ring-white"></div>
<div class="h-8 w-8 rounded-full bg-slate-400 ring-2 ring-white"></div>
<div class="h-8 w-8 rounded-full bg-slate-500 ring-2 ring-white"></div>
</div>
<button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:hover:bg-slate-100">Add Task</button> <!-- ws-ok: CTA button -->
</div>
</div>
<div class="flex gap-5 overflow-x-auto pb-4">
<!-- Column: To Do -->
<div class="w-72 shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-slate-400"></span>
<h3 class="text-sm font-semibold text-slate-700">To Do</h3>
<span class="rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-600">3</span>
</div>
<button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
</button>
</div>
<div class="space-y-3">
<article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="mb-3 flex items-center justify-between">
<span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Design</span>
<span class="text-xs text-slate-400">3 days left</span>
</div>
<h4 class="mb-2 text-sm font-semibold text-slate-900">Redesign landing page</h4>
<p class="text-xs text-slate-500">Update hero section and CTA placement for better conversion.</p>
<div class="mt-3 flex items-center justify-between">
<div class="flex -space-x-1.5">
<div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
<div class="h-6 w-6 rounded-full bg-slate-400 ring-2 ring-white"></div>
</div>
<div class="flex items-center gap-3 text-xs text-slate-400">
<span class="flex items-center gap-1">
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
4
</span>
<span class="flex items-center gap-1">
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
2
</span>
</div>
</div>
</article>
<article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="mb-3">
<span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Development</span>
</div>
<h4 class="mb-2 text-sm font-semibold text-slate-900">API integration</h4>
<p class="text-xs text-slate-500">Connect payment gateway and test webhook endpoints.</p>
<div class="mt-3 flex items-center justify-between">
<div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
<span class="text-xs text-slate-400">5 days left</span>
</div>
</article>
</div>
</div>
<!-- Column: In Progress -->
<div class="w-72 shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-blue-500"></span>
<h3 class="text-sm font-semibold text-slate-700">In Progress</h3>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600">2</span>
</div>
<button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
</button>
</div>
<div class="space-y-3">
<article class="rounded-xl border border-blue-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="mb-2 h-32 rounded-lg bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20"></div>
<div class="mb-3">
<span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Marketing</span>
</div>
<h4 class="mb-2 text-sm font-semibold text-slate-900">Social media campaign</h4>
<div class="mt-3 flex items-center justify-between">
<div class="flex -space-x-1.5">
<div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
<div class="h-6 w-6 rounded-full bg-slate-400 ring-2 ring-white"></div>
<div class="h-6 w-6 rounded-full bg-slate-500 ring-2 ring-white"></div>
</div>
<span class="text-xs text-slate-400">1 day left</span>
</div>
</article>
</div>
</div>
<!-- Column: Review -->
<div class="w-72 shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span>
<h3 class="text-sm font-semibold text-slate-700">Review</h3>
<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600">1</span>
</div>
<button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
</button>
</div>
<div class="space-y-3">
<article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="mb-3 flex items-center justify-between">
<span class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-700">Content</span>
<span class="text-xs text-red-500 font-medium">Overdue</span>
</div>
<h4 class="mb-2 text-sm font-semibold text-slate-900">Write blog article</h4>
<p class="text-xs text-slate-500">Draft article about new product features and benefits.</p>
<div class="mt-3 flex items-center justify-between">
<div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
<div class="flex items-center gap-1 text-xs text-slate-400">
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
7
</div>
</div>
</article>
</div>
</div>
<!-- Column: Done -->
<div class="w-72 shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
<h3 class="text-sm font-semibold text-slate-700">Done</h3>
<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-600">2</span>
</div>
</div>
<div class="space-y-3">
<article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 opacity-75 shadow-sm">
<div class="mb-3">
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500 line-through">Design</span>
</div>
<h4 class="mb-2 text-sm font-semibold text-slate-500 line-through">Create wireframes</h4>
<div class="mt-3 flex items-center justify-between">
<div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
<span class="text-xs text-emerald-500">Completed</span>
</div>
</article>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
kanbanboardproject-managementtasksagiledrag-drop
Slots
| Name | Required | Description |
|---|---|---|
| toolbar | No | Top bar with team avatars and add button. |
| columns | Yes | Status columns with task cards. |
| card | Yes | Individual task card with metadata. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | number | 4 | Number of status columns. |