shadcn.io is not affiliated with official shadcn/ui
Dependency Tracking Comments Block for React
Five comments that are tasks form a chain of Blocked by links: resolving one frees those waiting on it, a blocked one refuses with its count, and adding a link refuses a loop.
Installation
Overview
Show what is waiting on what, with this dependency tracking comment block for React with Base UI. A compact header names the checklist and the frame draws five comments as a chain along a connector rail. Each task says in a word and a glyph whether it is Blocked, Ready or Resolved, lists the tasks it waits on as Badges and says how many (Waits on 2). Resolve is a toggle button: resolving a task flips every task that waited only on it to Ready, a blocked one refuses and names what it waits on, and a resolved one can be reopened. Blocked by opens a small Popover of the other tasks and adds a link, refusing one that is already there or would make a loop. The one primary Shine Button resolves every ready task, and Reset restores the starting chain. It is built from Popover, Shine Button, Button, Badge and Guides, with CSS only. For launch checklists, runbooks and any thread of tasks with an order.
FAQ
How do I model my own tasks?
Edit TASKS (an id, a short name, a title and an author) and START_EDGES, the list of { task, on } links meaning that task waits on on. Blocked, Ready and Resolved, the counts and the refusals are all worked out from the links and the list of resolved ids.
How are loops refused?
Before adding a link from A to B the page walks B's own blockers, and theirs, looking for A. If it finds A, or B is A, the link would close a loop and is refused with a message; a link that already exists is refused too. The list marks those options in text before you press them.
What happens when I resolve or reopen?
Resolving a ready task marks it done and the status line names the tasks that became ready. Resolving a blocked one is refused and says what it waits on. Reopening a task makes the tasks that wait on it blocked again, but tasks you already resolved stay resolved.
What stays local?
The links and the resolved tasks live in the page and nothing is saved or sent. To make it real, store the edges, validate on the server that a new link keeps the graph acyclic and that a task is only resolved when its blockers are, and return the new states.
Is it accessible?
The tasks are an ordered list with the state written as a word and a glyph, the blockers are a named list per task, and Resolve reports whether it is pressed. A refused Resolve stays focusable with its reason attached by aria-describedby, the picker is a list of buttons inside a popover, and every change is announced in the polite status line.