shadcn.io is not affiliated with official shadcn/ui
OKR Task List Block for React Aria
Three objectives with two key results each, moved by the tasks you tick, key result bars from their start to their target, objective bars as the mean, and a status word against how much of Q4 has passed.
Installation
Overview
Run quarterly objectives from the work that moves them, with this OKR to-do list block for React with React Aria. Three objectives for Q4 are bands, each with a shaded header holding its name, a Progress bar, its percentage and a status word with an arrow. Under each, two key results show their number against the target ("3 guides of 6 guides", "62% of 80%"), a bar and a percentage, and below them the tasks that move that number as Checkbox rows, each worth a stated amount such as "+4 bugs". Ticking a task adds its amount; unticking takes it back. A key result's progress is how far its number has come between its start and its target, an objective is the mean of its key results, and the status word compares that with how much of the quarter has passed on a fixed "today": Ahead, On track, At risk or Behind, with the thresholds printed in the foot. Bands are ruled by Guides. For small teams that set goals each quarter and want them tied to actual tasks.
FAQ
How do the roll-ups work?
A key result's number is its base plus the amounts of its ticked tasks. Its progress is (number minus start) divided by (target minus start), held between 0 and 100 percent, so a coverage goal that starts at 62% reads 0% until a task lifts it. An objective's progress is the plain mean of its key results.
How is the status word chosen?
By comparing the objective's progress with the share of Q4 that has passed, 1 Oct to 31 Dec, on the fixed day Wed 14 Oct. Ahead is 10 points or more above, On track is within 10 points, At risk is up to 25 points below and Behind is further below. The thresholds are constants at the top of the file.
What stays local, and how do I save for real?
The ticks. Nothing is sent and they reset on reload. In your app write each task's done flag from the tick handler and compute the key result's number on the server too, so everyone sees one figure. Replace AS_OF, Q_START and Q_END with your quarter.
Is it accessible?
Tasks are checkboxes named by their titles, the amounts are text, and the status is a word with an arrow, not a colour. The bars are decorative beside the percentages. A polite message reads the objective's new percentage and status after each tick.
Why are key results driven by tasks?
Because a number someone types into a box tends to drift from the work. Here the only way to move a key result is to finish something named, which makes the objective a list you act on. If your key results come from a metrics system, replace the tasks with that feed.