Task List React component for Tailwind CSS v4
v1.0.1Updated in 1.2.1
A React to-do list: a checklist that strikes out completed tasks and moves them to the bottom, with each row also exported as TaskItem.
Click or tap a row to toggle it. Ticking fills the circle and draws a check, a line strikes through the label, the row gives a little flick, then it springs down to join the finished tasks at the bottom. Unticking runs the same road backwards and brings the row back up. Rows are real checkboxes, so Tab and Space or Enter work too.
Task List is a free React component in the React table and list components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add task-list, together with Motion presets and UIProvider and the npm package motion.
Add to a project
Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add task-listUsage
Import TaskList from @/components/ui/task-list.
"use client"
import { TaskList } from "@/components/ui/task-list"
export function Demo() {
return (
<TaskList
defaultTasks={[
{ id: "ship", label: "Ship a new component to the registry", done: true },
{ id: "preview", label: "Record a preview for the gallery" },
{ id: "star", label: "Star the repository" },
]}
/>
)
}
// one row on its own, no list around it (see TaskItem under Parts):
// <TaskItem label="Star the repository" size="sm" onCheckedChange={setDone} />Props
sizedefault"md""sm" | "md" | "lg"Row size. Text, circle, padding and radius all scale together, and the circle always matches one line of the label.
accentdefault"#FF5F2E"stringAny CSS color for the filled circle and the focus ring. The strike and the faded text stay grey.
surfaceColordefault"auto"stringFill of each row card, any CSS color. Auto is white on light pages and #1F1F1F on dark ones.
textColordefault"auto"stringColor of open task labels, any CSS color. Auto is a near black or near white that follows the theme.
doneTextColordefault"auto"stringColor of finished task labels and of the strike line, any CSS color. Auto is a mid gray tuned per theme.
radiusdefault"md""none" | "sm" | "md" | "lg" | "full"Corner radius of each row card: square, 4px tighter, the original 10 / 14 / 16px per size, 6px rounder, or a pill.
checkColordefault"#ffffff"stringAny CSS color for the tick drawn inside the filled circle.
strikedefaulttruebooleanDraws a line through finished labels. Off, they only fade to doneTextColor.
reorderdefaulttruebooleanSprings finished tasks down to the bottom of the list, and back up when reopened. Off, every row stays where it is.
completedLabeldefault"completed"stringAnnounced after a task label when it is ticked, e.g. "finalizat".
reopenedLabeldefault"reopened"stringAnnounced after a task label when it is unticked.
tasksTask[]The rows to show, each one an id, a label, and an optional done flag. Pass this with onTasksChange to drive the list yourself.
defaultTasksdefault"[]"Task[]The rows to start with when you are not driving the list. The list tracks which ones are done on its own.
onTasksChange(tasks: Task[]) => voidCalled with the full list every time a row is ticked or unticked.
classNamestringExtra classes merged onto the root element (data-slot="task-list"); other ul props are spread onto it too.
Parts
TaskItem
componentOne row on its own, no list around it: a checkbox button that ticks, strikes and flicks. The list renders one per task. Takes button props.
label*stringThe task text.
checkedbooleanControlled state; pair it with onCheckedChange.
defaultCheckeddefaultfalsebooleanStarting state when uncontrolled.
onCheckedChange(checked: boolean) => voidCalled on every toggle.
sizedefault"md""sm" | "md" | "lg"Same scale as the list.
radiusdefault"md""none" | "sm" | "md" | "lg" | "full"Corner radius of the card.
accentdefault"#FF5F2E"stringFill of the ticked circle and the focus ring.
checkColordefault"#ffffff"stringColor of the tick.
surfaceColordefault"auto"stringCard fill; auto is white light, #1F1F1F dark.
textColordefault"auto"stringLabel color while open.
doneTextColordefault"auto"stringLabel color once done.
strikedefaulttruebooleanDraws the line through a finished label.
onSettled() => voidFires once the tick, strike and flick have finished.
onReverted() => voidFires once the untick has finished.
Task
typeOne entry of tasks: { id, label, done? }.
Examples
Onboarding checklist
Controlled with tasks and onTasksChange, so the header can count what is done and fill a progress bar.
Keep the order
reorder and strike off: ticked rows stay in place and the label dims without a line; green accent, pill-shaped rows.
A single TaskItem
Each row is exported as TaskItem: label, checked or defaultChecked with onCheckedChange, size and accent. onSettled and onReverted fire when its animation has finished.
Files
- components/ui/task-list.tsx
FAQ
Is the React Task List component free?
Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.
How do I install Task List?
Run npx wingo-ui@latest add task-list. It also adds the Wingo UI items it builds on (Motion presets and UIProvider) and the npm package motion. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/task-list.json.