Sub-task Hierarchy React component
A big task broken into nested sub-tasks: progress rolls up through every level, blocked work stands out, and groups open and close without moving the card.
About the Sub-task Hierarchy component
Sub-task Hierarchy shows how a large job was split up and how far each part has come. Finished work rolls up through every level, so the number at the top is always honest.
Blocked work is marked in orange and counted, so it can't hide inside a closed group. Tick a task and every total above it updates.
When to use it
Use it when an agent breaks a goal into steps, or for any plan with nested work.
Three levels is usually enough. Deeper trees get hard to read on a phone.
Installation
Add the Sub-task Hierarchy component to your project with the shadcn CLI. It lands in components/sub-task-hierarchy.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/sub-task-hierarchyProps
<SubTaskHierarchy /> accepts 6 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Launch the new pricing page" |
| subtitle | string | "Split into smaller jobs by Lead." |
| tasks | { id: string; title: string; owner?: string; done?: boolean; blocked?: boolean; children?: SubTask[] }[] | DEFAULT_TASKS |
| defaultOpen Ids of the groups that start open. Leave out to open everything. | string[] | — |
| onToggleTask | (task: SubTask, done: boolean) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Launch the new pricing page"
- subtitlestringDefault: "Split into smaller jobs by Lead."
- tasks{ id: string; title: string; owner?: string; done?: boolean; blocked?: boolean; children?: SubTask[] }[]Default: DEFAULT_TASKS
- defaultOpen
Ids of the groups that start open. Leave out to open everything.
string[] - onToggleTask(task: SubTask, done: boolean) => void
Sub-task Hierarchy FAQ
- How is the percentage worked out?
- From finished leaf tasks, so a group counts only through the work inside it.
- Can groups start closed?
- Yes. Pass defaultOpen with the ids that should start open.
- Does opening a group change the height?
- No. The list scrolls inside a fixed window.
- Can tasks nest any number of levels?
- Yes. Each level indents by the same amount.
