Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Task Dependencies List Block for Solid

A build-order list where tasks wait on others: blocked rows show a lock and name their blockers as buttons that jump to them, finishing a task unlocks its dependents, and reopening one locks the open dependents again.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Plan work that has to happen in order, with this task dependencies block for Solid with Ark UI. Six tasks carry the ids of the tasks they wait on. A task with unfinished blockers shows a lock, its Checkbox can't be ticked, and a line "Waiting on:" names each blocker as a link-style button that moves focus to that task's row. Finishing a task unlocks the tasks that were waiting on it and the status line names them, "Unlocked 2 tasks: ...". Reopening a task locks its open dependents again, while dependents already finished stay finished and the line says so. The header counts blocked, ready and done tasks from the data, and Start over puts the list back. There is no add form: the order is the point. Guides rule the bands. For release checklists, onboarding sequences and any plan where step two needs step one.

FAQ

What exactly is the rule?

A task can be finished only when every task in its blockedBy list is finished. Until then its checkbox is disabled and its row says what it waits on. The check is made from the current data each time, so it holds however you reach a state.

What if I reopen a task that others already finished?

The finished dependents stay finished, because your work isn't undone; their rows say a task before them was reopened. Dependents still open are locked again and named in the status line.

What do the Waiting on buttons do?

They move focus to the blocker's row, which is shaded while it holds focus, so you can go straight to what is in the way. They are real buttons, named "Go to" and the task title.

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

Everything. The tasks live in page state and nothing is sent anywhere, so the list resets when you reload. In your app write each change from toggle to your own store, load the blockedBy ids from your data, and reject a cycle when a dependency is added.

How does it look on a phone?

The header counts and Start over share a row, and a task's blockers wrap onto extra lines under its title inside the same row.