shadcn.io is not affiliated with official shadcn/ui
Impact Effort Plane Kanban Block for Vue
A prioritisation plane with impact up and effort across, where ten numbered dots move anywhere by drag or arrow keys and a list says each idea's quadrant in words.
Installation
Overview
Place ideas by impact and effort with this prioritisation plane for Vue with Ark UI. A square plot has impact going up and effort going across, with the four quadrants named in its corners: Quick wins, Major projects, Fill-ins and Time sinks. Ten ideas are numbered dots that can sit anywhere on the plot, and the quadrant comes from where a dot lands. A dot moves by dragging it, or by Space, the arrow keys (10 percent a step, 2 with Shift) and Space again, and Escape cancels. A numbered list beside the plot is the other way in: it says each idea's place in words ("Impact high, effort low"), names its quadrant in an outline Badge and holds a Dropdown Menu with "Move to" for a single pointer and a screen reader. A polite status line reports each move and Reset restores the plane. The frame is ruled by Guides. On a phone the plot sits over the list. For roadmap triage, backlog grooming and workshops.
FAQ
How do I fill it with my own ideas?
Edit QUADRANTS and START. An idea has an id, a number n, a title and an x (effort) and y (impact) from 0 to 100; seat fills in its quadrant. The quadrant is worked out by quadrantOf, so changing the split from 50 to another value changes every name, count and sentence at once.
How does a dot move on the plane?
By pointer it follows the cursor and its quadrant changes as it crosses the lines. By keyboard, Space or Enter picks a dot up, an arrow key moves it 10 percent (2 with Shift), Space drops it and Escape returns it. The plot is always left to right, so the right arrow means more effort in every language. Every step is announced with its percentages and quadrant.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the four quadrants with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo?
Everything. The positions live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the people and the cards are made up. To keep a change, call your API from put, the one function every finished move goes through, and update the cards from the response.