Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Task List with Subtasks Block for React Aria

A project task list where each parent shows a progress bar and an N of M count, opens its subtasks, takes new ones, and is done exactly when every subtask is.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Break big tasks into steps, with this to-do list with subtasks block for React with React Aria. A parent row shows an inline Progress bar and "2 of 4" worked out from its children; the chevron opens the children, each a Checkbox, and an Input with "Add subtask" at the foot of the group. The parent follows its children: ticking the last subtask ticks the parent and the status line says it is done because every subtask is, and unticking one reopens it. Ticking a parent ticks every child at once, and a one-line Undo restores them. A parent with no children shows "No subtasks" and no bar. A Shine Button with an input adds a parent, and the frame is ruled by Guides. For project planners, onboarding lists and any task that has steps.

FAQ

How do I load my own tasks and subtasks?

Replace START. A task has an id, a title, a done flag and a kids array of subtasks with an id, a title and a done flag. For a task with subtasks the stored done flag is replaced by settled, which is true when every subtask is.

What decides whether a parent is done?

Its children. settled returns true only when there is at least one subtask and all of them are done, so adding a subtask to a finished parent reopens it. A parent with no subtasks keeps its own checkbox.

How does the bulk change Undo work?

Ticking or unticking a parent that has subtasks sets all of them in one step and shows one line, such as "Checked 4 subtasks of 'Launch the spring newsletter'", with Undo. Undo restores the subtasks and the parent exactly as they were. Ticking a single subtask replaces the line.

What stays local, and how do I save for real?

Everything: ticks, new tasks and new subtasks are page state and return to the starting plan on reload. Write each change from tickParent, tickKid, add and addKid to your own store.

Is it accessible?

The chevron is named with the task and reports whether it is expanded, every checkbox is named by its title, the progress bar is decorative beside its "2 of 4" text, and one polite status message announces what changed, including when a parent finishes or reopens.

All 100 todo list blocks