shadcn.io is not affiliated with official shadcn/ui
Effort Impact Matrix Task List Block for Vue
Eight backlog tasks on a five by five plot of effort and impact, a list to pick a task, two sliders that move its dot, the corner it lands in, and a table that lists every placement in text.
Installation
Overview
Decide what to build first, with this effort and impact matrix to-do list block for Vue with Ark UI. A drawn plot, five cells across and five up, carries one numbered dot per task, with the corners named Quick wins, Big bets, Fill-ins and Avoid and dashed lines where low effort and high impact begin. Beside it, a group of native radio rows picks the task to place and two labelled range sliders set its Effort and Impact from 1 to 5; the picked dot gets a ring and moves as you slide, and a line says which corner it lands in. Because the plot is a drawing, a table under it lists every task with its effort, impact and corner in text, so nothing depends on seeing the dots. A foot counts the tasks in each corner and resets the placements. Bands are ruled by Guides and the reset is a Button. For backlog grooming, roadmap prep and any team that argues about priority.
FAQ
How are the corners decided?
Effort of 3 or less is low and impact of 3 or more is high. Low effort with high impact is a Quick win, high effort with high impact is a Big bet, low effort with low impact is a Fill-in, and high effort with low impact is Avoid. The dashed lines on the plot sit at those thresholds, and cornerOf is the one place to change them.
What stays local, and how do I save for real?
Every placement. Moving a slider changes state on the page and nothing is sent, so the plot resets when you reload or press Reset placements. In your app write the new effort and impact from the slider handlers, and load the tasks from your backlog.
What if I can't see the plot?
The plot is hidden from assistive technology on purpose and the table under it says the same thing: each row has the task, its corner, its effort and its impact. The sliders announce their value ("3 of 5") and a status message reads the new placement aloud after each change.
What happens when two tasks share a cell?
Their dots sit in the same cell shifted a few pixels apart by task number so both stay visible, and the table still lists each one separately. The numbers on the dots match the numbers in the task list.