dashboard kanban board tasks project-management columns kanban board tasks columns todo progress done project kanban board for task management project dashboard with columns
Dashboard Kanban
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard/kanban.json kanban.html
<section class="ws-dashboard bg-[var(--ws-dashboard-bg)] py-8">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-6 flex items-center justify-between">
<h2 class="text-lg font-semibold text-[var(--ws-dashboard-text)]">Project Board</h2>
<button class="inline-flex items-center gap-1.5 rounded-lg bg-[var(--ws-dashboard-accent)] px-3 py-1.5 text-sm font-medium text-white hover:opacity-90">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
Add Task
</button>
</div>
<div class="flex gap-4 overflow-x-auto pb-4">
<!-- To Do Column -->
<div class="w-80 flex-shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<h3 class="text-sm font-semibold text-[var(--ws-dashboard-text)]">To Do</h3>
<span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-black/10 px-1.5 text-xs font-medium text-[var(--ws-dashboard-text-soft)]">3</span>
</div>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<div class="space-y-3">
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-4 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">High</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)]">Design new landing page</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Create wireframes and high-fidelity mockups for the marketing site redesign.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 15</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-4 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">Medium</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)]">Update API documentation</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Document new endpoints and update authentication examples.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 18</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-4 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-sky-100 px-2 py-0.5 text-xs font-medium text-sky-700">Low</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)]">Refactor auth module</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Clean up legacy authentication code and add unit tests.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<div class="h-6 w-6 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 22</span>
</div>
</div>
</div>
</div>
<!-- In Progress Column -->
<div class="w-80 flex-shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<h3 class="text-sm font-semibold text-[var(--ws-dashboard-text)]">In Progress</h3>
<span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-indigo-100 px-1.5 text-xs font-medium text-indigo-700">2</span>
</div>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<div class="space-y-3">
<div class="rounded-xl border border-indigo-200 bg-[var(--ws-dashboard-card-bg)] p-4 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">High</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)]">Build checkout flow</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Implement multi-step checkout with Stripe integration and order summary.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<div class="h-6 w-6 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 12</span>
</div>
</div>
<div class="rounded-xl border border-indigo-200 bg-[var(--ws-dashboard-card-bg)] p-4 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">Medium</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)]">Set up CI/CD pipeline</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Configure GitHub Actions for automated testing and deployment.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 14</span>
</div>
</div>
</div>
</div>
<!-- Done Column -->
<div class="w-80 flex-shrink-0">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<h3 class="text-sm font-semibold text-[var(--ws-dashboard-text)]">Done</h3>
<span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-emerald-100 px-1.5 text-xs font-medium text-emerald-700">2</span>
</div>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<div class="space-y-3">
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-4 opacity-75 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Complete</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)] line-through">Set up project repository</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Initialize monorepo, configure tooling, and set up development environment.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 8</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-4 opacity-75 shadow-sm">
<div class="mb-2 flex items-center justify-between">
<span class="inline-flex rounded-md bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Complete</span>
<button class="text-[var(--ws-dashboard-text-muted)] hover:text-[var(--ws-dashboard-text-soft)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
</button>
</div>
<h4 class="text-sm font-medium text-[var(--ws-dashboard-text)] line-through">Design system tokens</h4>
<p class="mt-1 text-xs text-[var(--ws-dashboard-text-muted)]">Define color palette, typography scale, and spacing tokens in Tailwind config.</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-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<div class="h-6 w-6 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0 ring-2 ring-[var(--ws-dashboard-card-bg)]" aria-hidden="true">
<svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</div>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">Mar 6</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardkanbanboardtasksproject-managementcolumns
Slots
| Name | Required | Description |
|---|---|---|
| columns | Yes | Kanban columns with header, count badge, and task cards. |
| cards | Yes | Task cards with title, description, avatar, and priority tag. |
Kanban board with three columns: To Do, In Progress, and Done. Each column has a header with count badge and task cards showing title, description, assignee avatar, and priority tag. Horizontally scrollable on mobile. Extend with drag-and-drop JS for interactive use.