task todo checklist productivity widget task todo checklist list productivity items show a to-do list display tasks with checkboxes
Task List Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/task-widget/base.json base.html
<section class="ws-task-widget bg-[var(--ws-task-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-md overflow-hidden rounded-2xl border border-[var(--ws-task-widget-border)] bg-[var(--ws-task-widget-bg)] shadow-md">
<div class="flex items-center justify-between border-b border-[var(--ws-task-widget-border)] px-6 py-4">
<h3 class="text-lg font-semibold text-[var(--ws-task-widget-text)]">Tasks</h3>
<span class="inline-flex items-center rounded-full bg-[var(--ws-task-widget-muted-bg)] px-2.5 py-0.5 text-xs font-medium text-[var(--ws-task-widget-text-soft)]">3/8 done</span>
</div>
<ul class="divide-y divide-[var(--ws-task-widget-border)]" role="list">
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-success)]" aria-label="Completed">☑</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text-muted)] line-through">Set up project repository</span>
<span class="size-2.5 rounded-full bg-green-500" aria-label="Low priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-success)]" aria-label="Completed">☑</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text-muted)] line-through">Design landing page wireframe</span>
<span class="size-2.5 rounded-full bg-yellow-500" aria-label="Medium priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-success)]" aria-label="Completed">☑</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text-muted)] line-through">Configure CI/CD pipeline</span>
<span class="size-2.5 rounded-full bg-green-500" aria-label="Low priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-text-soft)]" aria-label="Not completed">☐</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text)]">Build authentication flow</span>
<span class="size-2.5 rounded-full bg-red-500" aria-label="High priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-text-soft)]" aria-label="Not completed">☐</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text)]">Implement dashboard API</span>
<span class="size-2.5 rounded-full bg-red-500" aria-label="High priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-text-soft)]" aria-label="Not completed">☐</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text)]">Write unit tests for core modules</span>
<span class="size-2.5 rounded-full bg-yellow-500" aria-label="Medium priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-text-soft)]" aria-label="Not completed">☐</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text)]">Create onboarding tutorial</span>
<span class="size-2.5 rounded-full bg-green-500" aria-label="Low priority"></span>
</li>
<li class="flex items-center gap-3 px-6 py-3.5">
<span class="text-lg text-[var(--ws-task-widget-text-soft)]" aria-label="Not completed">☐</span>
<span class="flex-1 text-sm text-[var(--ws-task-widget-text)]">Review pull requests</span>
<span class="size-2.5 rounded-full bg-yellow-500" aria-label="Medium priority"></span>
</li>
</ul>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
tasktodochecklistproductivitywidget
A straightforward task list widget with checkbox rows, task titles, and optional priority badges. Includes a progress summary at the top showing completed vs. total items. Works well in dashboards, sidebars, and productivity tools.