shadcn.io is not affiliated with official shadcn/ui
Decision Matrix Kanban Block for Radix UI
A confidence by value matrix of eight decisions in Proceed now, Pilot test, Defer and Research more, with a decision log that records every move and undoes the last.
Installation
Overview
Decide what to do with each option and keep a record of it with this decision matrix for React with Radix UI. A hairline frame with a plus mark on each corner holds four quadrants laid out as a grid, confidence across and value down: Proceed now, Pilot test, Defer and Research more. Each of the eight decisions says in words what its quadrant asks for next ("Pilot: pick a length and a measure"), and the line changes when the card moves. Under the grid a decision log lists every finished move ("Moved Annual billing to Pilot test"), newest first, with Undo last and Clear log Buttons. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to"; a polite status line reports each move and Reset restores the matrix. The frame is ruled by Guides. On a phone the quadrants stack in one named region. For product reviews, pricing debates and any call that gets revisited.
FAQ
How do I fill it with my own decisions?
Edit COLUMNS and START. A quadrant has an ask, the sentence every card in it shows, and a decision has an id, a title, a note, an owner and a column of go, pilot, defer or research. The header sentence and the counts are calculated from the cards.
What does the log record, and what does Undo do?
A line for every move that changes a decision's quadrant, whether it came from a drop, the keyboard or the menu; a drop back into the same quadrant is not logged. Undo last puts the board back as it was before the newest line, moves focus to that card and removes the line. Clear log empties the list but leaves the decisions where they are. Reset clears both.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the decision's title. Space or Enter picks it up, the arrow keys move it (left and right change quadrant along the row, up and down reorder and then cross to the quadrant above or below; they swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line in the foot.
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 moves and the log 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.
How does it look on a phone?
The quadrants stack one under another in a named region that scrolls up and down, each with its own scrolling list, and the log sits under the grid at a fixed height of four lines. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.